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

Top comments (3)

Collapse
 
nicolaspavlotsky profile image
Nicolas Pavlotsky •

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

Collapse
 
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.

Collapse
 
webuijorgegl profile image
Jorge Suarez •

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

Read next

pranavyamjal profile image

Make Your Own Server Using Express.js and Node.js

Pranav Yamjal -

littlelittlecloud profile image

StepWise: A Powerful C# Workflow Engine for Task Execution

Xiaoyun Zhang -

antonmak1 profile image

js-framework-benchmark - variations of the ideal solution to the mathematical problem of speed or why it is standard

antonmak1 -

air_choosy profile image

SLATE Code editor with highlight

priolo -