Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xotahal/react-native-motion
Animate it! Easily!
https://github.com/xotahal/react-native-motion
animation react-native ux
Last synced: 29 days ago
JSON representation
Animate it! Easily!
- Host: GitHub
- URL: https://github.com/xotahal/react-native-motion
- Owner: xotahal
- License: mit
- Created: 2018-03-19T02:57:21.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-24T14:32:31.000Z (over 4 years ago)
- Last Synced: 2024-10-01T11:41:56.444Z (about 1 month ago)
- Topics: animation, react-native, ux
- Language: JavaScript
- Homepage:
- Size: 44.9 KB
- Stars: 2,074
- Watchers: 50
- Forks: 131
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-native-motion
README
# 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)
### 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 (
);
}
}
```
```js
// List items page with source of SharedElement
import { SharedElement } from 'react-native-motion';
class ListPage extends Component {
render() {
return (
{listItemNode}
);
}
}
```
```js
// Detail page with a destination shared element
import { SharedElement } from 'react-native-motion';
class DetailPage extends Component {
render() {
return (
{listItemNode}
);
}
}
```
### 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 |
| -------------------------------------------------------------------------------------------------------------------------------------- |
| [
](http://bit.ly/t-xotahal) |