DEV Community

Kay Gosho
Kay Gosho

Posted on

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:

image

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)
Enter fullscreen mode Exit fullscreen mode

I wonder why this is the default behavior...

Ref

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

Discussion (3)

Collapse
nicolaspavlotsky profile image
Nicolas Pavlotsky

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

Collapse
acro5piano profile image
Kay Gosho Author

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

Collapse
webuijorgegl profile image
Jorge Suarez

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