loading...

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

acro5piano profile image Kay Gosho ・1 min read

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)

I wonder why this is the default behavior...

Ref

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

Posted on by:

Discussion

markdown guide
 

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

 

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

 

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