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 something like this seems to work:

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>
);

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