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