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:


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

The solution is very simple:

import {
} 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...


Top comments (3)

nicolaspavlotsky profile image
Nicolas Pavlotsky

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

acro5piano profile image
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.

webuijorgegl profile image
Jorge Suarez

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

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.