Change your application from the left one to the right one! Animate it! Easily! Animated Transition Article or Animated Graph Article
$ yarn add react-native-motionWe need to specify source and destination for shared element. This library then will move the shared element from source position to destination position.
class Main extends Component {
render() {
return (
<SharedElementRenderer>
<App />
</SharedElementRenderer>
);
}
}// 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>
);
}
}// 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>
);
}
}- react-native-motion-playground repository
- expo app
- Let me help you with animations in React Native 🤙
- Facebook Group about animation in React Native
- Publication about animation in React Native 🚗
- Personal Medium Account about programming 😍
- Subscribe a blog 📝
- Follow me on Twitter 🐦
| Jiri Otahal |
|---|
 |