How to disable react navigation's stack navigator transition?

Question

In React Native (iOS), React navigation's stack navigator has a default transition animation to move screens left or right based on the stack order. Is there any way to disable the transition animation?

Answer 1

React Navigation 5

{/* Screen level */}
<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen
      name="HomeScreen"
      component={HomeScreen}
      options={{
        animationEnabled: false,
      }}
    />
  </Stack.Navigator>
</NavigationContainer>

{/* Whole navigation stack */}
<Stack.Navigator screenOptions={{ animationEnabled: false }}></Stack.Navigator>

React Navigation 6

<Stack.Navigator screenOptions={{ animation: 'none' }}></Stack.Navigator>

More options here https://reactnavigation.org/docs/stack-navigator/

Answer 2

You can disable transition animations with the animationEnabled navigation option. Docs

defaultNavigationOptions: ({navigation}) => ({
  animationEnabled: false,
})

You may want to pass this in navigationOptions instead depending on your use case.

Answer 3

Hope it would help you. Please try as below.

const StackNavigatorConfig = {
  [...]
  transitionConfig : () => ({
    transitionSpec: {
      duration: 0,
      timing: Animated.timing,
      easing: Easing.step0,
      },
  }),
}

export const Navigator = StackNavigator(RouteConfiguration,StackNavigatorConfig)