Home
Softono
x

xotahal

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Visit Website
Total Products
2

Software by xotahal

react-native-material-ui
Open Source

react-native-material-ui

# React Native Material UI (iOS and Android supported) Highly customizable material design components for React Native! [![npm](https://img.shields.io/npm/v/react-native-material-ui.svg)](https://www.npmjs.com/package/react-native-material-ui) [![codecov](https://codecov.io/gh/xotahal/react-native-material-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/xotahal/react-native-material-ui) [![npm](https://img.shields.io/npm/dm/react-native-material-ui.svg)](https://img.shields.io/npm/dm/react-native-material-ui.svg) [![Dependencies](https://david-dm.org/xotahal/react-native-material-ui.svg)](https://david-dm.org/xotahal/react-native-material-ui.svg) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/xotahal/react-native-material-ui/master/LICENSE) ## Documentation - [Getting Started](https://github.com/xotahal/react-native-material-ui/blob/master/docs/GettingStarted.md) - [Usage](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Usage.md) - [Demo & Examples](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Demo.md) - [Components](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Components.md) ## Showroom ### [Savee.io](http://bit.ly/savee-io) [iOS App](http://bit.ly/savee-ios) & [Android App](http://bit.ly/savee-android) <img src="https://cdn-images-1.medium.com/max/2000/1*c4LrPZvMIgIZntDPfYDKFA.png" width="512px" /> ### [Reservio](https://www.reservio.com/) [iOS App](https://itunes.apple.com/us/app/reservio/id1314263364?mt=8) & [Android App](https://play.google.com/store/apps/details?id=com.reservio&hl=en) <img src="https://lh3.googleusercontent.com/1wm87owPIRr_vp9FrroYuD4eusW2x8N7H7OdhP_B2ynLDIds6s83VAWKFz8xBa3NOh8=w1440-h620-rw" width="256px" /><img src="https://lh3.googleusercontent.com/AIDK60jiX6ldE9dZ4n5srJSG1sdeRKgsqIEdfdyCQvJcNY1rW7vCmHwvC6aOcLk7swE=w1440-h620-rw" width="256px" /> ## Questions If you need anything ping us on [twitter](http://bit.ly/t-xotahal). | Jiri Otahal | Jan Ziemba | | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | | [<img src="https://avatars3.githubusercontent.com/u/3531955?v=4" width="100px;" style="border-radius:50px"/>](http://bit.ly/t-xotahal) | [<img src="https://avatars1.githubusercontent.com/u/4710865?v=4" width="100px;" style="border-radius:50px"/>]() |

CSS Frameworks & UI Kits Mobile Development
3.8K Github Stars
react-native-motion
Open Source

react-native-motion

# React Native Motion Change your application from the left one to the right one! Animate it! **Easily!** [Animated Transition Article](http://bit.ly/animated-transition) or [Animated Graph Article](http://bit.ly/animated-graph) <img src="https://github.com/xotahal/ui-interactions-detail-view/blob/master/assets/Final%20-%20Without%20animation.gif" width="240"><img src="https://github.com/xotahal/ui-interactions-detail-view/blob/master/assets/Final.gif" width="240"> ### Getting Started ```bash $ yarn add react-native-motion ``` ### Usage of SharedElement We need to specify source and destination for shared element. This library then will move the shared element from source position to destination position. ```js class Main extends Component { render() { return ( <SharedElementRenderer> <App /> </SharedElementRenderer> ); } } ``` ```js // List items page with source of SharedElement import { SharedElement } from 'react-native-motion'; class ListPage extends Component { render() { return ( <SharedElement id="source"> <View>{listItemNode}</View> </SharedElement> ); } } ``` ```js // Detail page with a destination shared element import { SharedElement } from 'react-native-motion'; class DetailPage extends Component { render() { return ( <SharedElement sourceId="source"> <View>{listItemNode}</View> </SharedElement> ); } } ``` ### Playground for **react-native-motion** library - [react-native-motion-playground](https://github.com/xotahal/react-native-motion-playground) repository - [expo app](https://expo.io/@xotahal/react-native-motion-example) ## Author - [Let me help you](http://link.xotahal.cz/research) with animations in React Native 🤙 - [Facebook Group](https://www.facebook.com/groups/react.native.motion/) about animation in React Native - [Publication](https://medium.com/react-native-motion) about animation in React Native 🚗 - Personal [Medium Account](https://medium.com/@xotahal) about programming 😍 - Subscribe a [blog](https://blog.xotahal.cz) 📝 - Follow me on [Twitter](http://bit.ly/t-xotahal) 🐦 | Jiri Otahal | | -------------------------------------------------------------------------------------------------------------------------------------- | | [<img src="https://avatars3.githubusercontent.com/u/3531955?v=4" width="100px;" style="border-radius:50px"/>](http://bit.ly/t-xotahal) |

JavaScript Libraries & Components
2.1K Github Stars