react-native-advance-motion-list

react-native-advance-motion-list JS library on GitHub react-native-advance-motion-list JS library on npm Download react-native-advance-motion-list JS library

React Native Motion List

Version 0.0.2 License MIT Vulnerabilities 0
react-native-advance-motion-list has no homepage
react-native-advance-motion-list JS library on GitHub
react-native-advance-motion-list JS library on npm
Download react-native-advance-motion-list JS library
Keywords
react-nativeanimationanimation-listmotionuiuxiosandroid

React Native Motion List

Change your application from the left one to the right one! Animate it! Easily! Animated Transition Article or Animated Graph Article

Getting Started

$ yarn add react-native-advance-motion-list

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.

class Main extends Component {
  render() {
    return (
      <SharedElementRenderer>
        <App />
      </SharedElementRenderer>
    );
  }
}
// List items page with source of SharedElement
import { SharedElement } from 'react-native-advance-motion-list';

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-advance-motion-list';

class DetailPage extends Component {
  render() {
    return (
      <SharedElement sourceId="source">
        <View>{listItemNode}</View>
      </SharedElement>
    );
  }
}

Author

  • Mr-Strike