Skip to content
Animate it! Easily!
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore: Use semantic-release to publish Feb 25, 2019
src Add ability to specify pointer events for TranslateY Feb 5, 2019
.eslintrc Fix lint Oct 29, 2018
.gitignore Init Mar 19, 2018
.prettierignore
.prettierrc
LICENSE Init Mar 19, 2018
README.md Update README.md Jun 22, 2018
index.js Update lint Oct 29, 2018
package.json chore: add semantic release Feb 25, 2019
release.config.js chore: Add semantic release Feb 25, 2019

README.md

React Native Motion

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-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.

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>
    );
  }
}

Demo

Try it with expo

Note

This repo is still under reconstruction. Will be improved.

You can’t perform that action at this time.