├── .babelrc ├── .eslintrc ├── .gitignore ├── README.md ├── docs └── demo.gif ├── package.json ├── src ├── Transition.js ├── index.js ├── transitionStylePropType.js └── transitions │ ├── Fade.js │ ├── FlipX.js │ ├── FlipY.js │ ├── SlideDown.js │ ├── SlideLeft.js │ ├── SlideRight.js │ └── SlideUp.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "parser": "babel-eslint", 4 | "rules": { 5 | "react/jsx-filename-extension": ["error", { "extensions": ["js", "jsx"] }], 6 | "no-underscore-dangle": ["error", { "allowAfterThis": true }] 7 | } 8 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Don't include generated files 4 | /lib 5 | 6 | # Ignore debug files 7 | npm-debug.log 8 | 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-transition 2 | A fully customizable view transition library for react-native. The library 3 | could be used to transition entire screens or small parts within a View. 4 | 5 | The library has been designed to use customizable transition styles, that 6 | could be easily created and plugged into the application. Checkout the 7 | [Custom Transitions](#custom-transitions) section to learn more about creating 8 | transitions. 9 | 10 | Check out a demo application available at 11 | [Transition Demo](https://github.com/sharingapples/react-native-transition-demo). 12 | ![Demo Animation](./docs/demo.gif) 13 | 14 | ### Caution 15 | The react-native library below 0.43 throws `onLayout` event on Android for every change 16 | in the child UI elements (even when changes are made through setNativeProps) even 17 | when the parent's layout is unaffected. This problem is specially observable while using 18 | drag & drop libraries, wherein this even is called a lot, affecting the performance. So 19 | use caution while using this library on React Native versions below 0.43. 20 | 21 | ### Installation 22 | ` $ npm install --save react-native-transition` 23 | 24 | ### Usage 25 | 26 | 1. Import `createTransition` and transition styles from the library 27 | import { createTransition, FlipX } from 'react-native-transition'; 28 | 29 | 2. Create a transition component with optional styles 30 | const Transition = createTransition(FlipX); 31 | 32 | 3. Render the initial view within the `Transition` component 33 | 34 | <Transition> 35 | <View>...<View> 36 | </Transition> 37 | 38 | 39 | 4. Use the show method from component to perform transition 40 | 41 | onPress = (e) => { Transition.show(<View> ... </View>); } 42 | 43 | 44 | #### Example 45 | ```javascript 46 | import React, { Component } from 'react'; 47 | import { View, Text } from 'react-native'; 48 | 49 | import { createTransition, FlipX } from 'react-native-transition'; 50 | 51 | const Transition = createTransition(FlipX); 52 | 53 | class YourView extends Component { 54 | this.switch = () => { 55 | Transition.show( 56 | 57 | This is another view 58 | 59 | ); 60 | } 61 | 62 | render() { 63 | return ( 64 | 65 | 66 | This the initial View 67 |