Package Manager | Command |
---|---|
npm | npm i --save react-navigation-transition-config |
yarn | yarn add react-navigation-transition-config |
Use these functions as transitionConfig
with react-navigation:
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
-
fromLeft
-
fromRight
-
fromBottom
-
fromTop
-
zoomIn
-
zoomOut
-
flipX
-
flipY
-
fadeIn
This library is based on react-navigation-transitions. I added more transitions!
Read more in react-navigation docs.