How to change the direction of the animation in StackNavigator?

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

Updated answer:

import ReactNavigation from "react-navigation";
createStackNavigator({...},{
  transitionConfig: () =>
    ReactNavigation.StackViewTransitionConfigs.SlideFromRightIOS
})

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