Use the same screen navigation animation both on Android/iOS with React Native + React Navigation

React Navigation's default screen navigation on Android looks strange, because it creates modals even if "swipe to left" closes the modal:

I would like the animation to slide from left to right in the same way on iOS:

The solution is very simple:

import {
  createAppContainer,
  createStackNavigator,
  StackViewTransitionConfigs,
} from 'react-navigation'

const Navigation = createStackNavigator({
  screenA: ComponentA,
  screenB: ComponentB,
}, {
  mode: 'card',
  transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,
}

export const AppNavigation = createAppContainer(Navigation)

I wonder why this is the default behavior...

Ref

https://stackoverflow.com/questions/48018666/how-to-change-the-direction-of-the-animation-in-stacknavigator

Comments

[Nicolas Pavlotsky]

This works! But is there any way to implement swipe back?

[Kay Gosho]

Thank you for your comment.
If you set gesturesEnabled: true in stack navigation config swipe back will be enabled, which is the default settings.

[Jorge Suarez]

do you if for @react-navigation/bottom-tabs works?