npm install react-navigation-transitions --save
These functions are meant to be used as the transitionConfig
with react-navigation. So far it includes the following transitions:
fromLeft
fromTop
fadeIn
zoomIn
zoomOut
flipY
flipX
More will be added in future versions.
import { createStackNavigator } from 'react-navigation';
import { fromLeft } from 'react-navigation-transitions';
const appStack = createStackNavigator(
{
ScreenA: {
screen: ScreenA,
},
ScreenB: {
screen: ScreenB,
},
},
{
initialRouteName: 'ScreenA',
transitionConfig: () => fromLeft(),
},
);
The default duration is 300 milliseconds but you can pass is a custom transition duration like so:
transitionConfig: () => fromLeft(1000),
The basis for these functions can be found in the react-navigation
docs here.