https://github.com/xotahal/react-native-motion

Animate it! Easily!
https://github.com/xotahal/react-native-motion

animation react-native ux

Last synced: about 2 months 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 (about 4 years ago)
• Last Synced: 2024-07-07T14:04:02.449Z (2 months ago)
• Topics: animation, react-native, ux
• Language: JavaScript
• Homepage:
• Size: 44.9 KB
• Stars: 2,070
• 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) |