react-navigation-transition-config

     

---

Install

Package Manager	Command
npm	npm i --save react-navigation-transition-config
yarn	yarn add react-navigation-transition-config

Usage

Use these functions as transitionConfig with react-navigation:

Example

import { createStackNavigator } from "react-navigation";
import { fromLeft } from "react-navigation-transition-config";

const rootStack = createStackNavigator(
  {
    ScreenA: {
      screen: ScreenA
    },
    ScreenB: {
      screen: ScreenB
    }
  },
  {
    initialRouteName: "ScreenA",
    transitionConfig: () => fromLeft()
  }
);

Note: The default duration is 300 milliseconds change it:

transitionConfig: () => fromLeft(1000),

You can also take a look at examples:

cd examples

yarn

react-native run-android

# OR

react-native run-ios

Transitions

• fromLeft

• fromRight

• fromBottom

• fromTop

• zoomIn

• zoomOut

• flipX

• flipY

• fadeIn

Credit

This library is based on react-navigation-transitions. I added more transitions!

More references

Read more in react-navigation docs.