How to change the direction of the animation in StackNavigator?

Question

How to change the direction of the animation in StackNavigator?

Current Behavior

When user goes to another screen, the screen flies from bottom to top.

Expected Behavior

When user goes to another screen, the screen flies from right to left. (Like Facebook or Instagram!)

StackNavigator Code

export default StackNavigator ({     Main: {         screen: MainScreen,     },     ... }, {     navigationOptions: ({navigation, screenProps}) => ({         tabBarOnPress: blahblaj     }),     lazy: true     // I guess we can do something here }); 

• If we can set the animation time, it will be even better! Currently it looks like the screen flies from middle of the screen to top. I want natural animation like Facebook or Instagram :)

Thanks in advance,

Answer 1

For react navigation > 5.0:

import {   CardStyleInterpolators,   createStackNavigator, } from '@react-navigation/stack';      const Stack = createStackNavigator(); export default () => (   <Stack.Navigator     screenOptions={{       cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS     }}   >     <Stack.Screen name="Screen 1" component={ScreenComponent1} />     <Stack.Screen name="Screen 2" component={ScreenComponent2} />   </Stack.Navigator> ); 

You may also want to use headerStyleInterpolator: HeaderStyleInterpolators.forUIKit

More info here: https://reactnavigation.org/docs/stack-navigator/#pre-made-configs

Answer 2

For react navigation < 5.0

On iOS it's standard behavior. Android requires a little bit of configuration. There are two options you can use to set screen transitions: mode and transitionConfig. In this case transitionConfig will work:

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'; // this path can be different depending on react-navigation version, this one is for @1.0.0-beta.15   export default StackNavigator ({     Main: {         screen: MainScreen,     },         ... }, {    transitionConfig: () => ({         screenInterpolator: CardStackStyleInterpolator.forHorizontal,    }), }) 

We use CardStackStyleInterpolator from react-navigation source, but you can provide custom transition if you want, here is how to make one or here or this article.

mode is more for default behavior:

export default StackNavigator ({     Main: {         screen: MainScreen,     },     ... }, {     mode: 'card',     navigationOptions: ({navigation, screenProps}) => ({         tabBarOnPress: blahblaj     }),     lazy: true }); 

mode can have only two values:

• card - Use the standard iOS (right to left) and Android (bottom to top) screen transitions. This is the default.

• modal - Make the screens slide in from the bottom which is a common iOS pattern. Only works on iOS, has no effect on Android.

For react navigation >= 5.0:

import {   CardStyleInterpolators,   createStackNavigator, } from '@react-navigation/stack';      const Stack = createStackNavigator(); export default () => (   <Stack.Navigator     screenOptions={{       cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS     }}   >     <Stack.Screen name="Screen 1" component={ScreenComponent1} />     <Stack.Screen name="Screen 2" component={ScreenComponent2} />   </Stack.Navigator> ); 

You may also want to use headerStyleInterpolator: HeaderStyleInterpolators.forUIKit

More info here: https://reactnavigation.org/docs/stack-navigator/#pre-made-configs