How to disable react navigation's stack navigator transition?

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/

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.

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)

React Navigation v6:

Use screenOptions={{ animation: 'none' }} on the Navigator to disable all animations inside the Navigator

or

use options={{ animation: 'none' }} on the Screen you wan't to navigate to without animation.

Code Example:

<Stack.Navigator screenOptions={{ animation: 'none' }}>
  <Stack.Screen name="Home" component={Home} />
  <Stack.Screen name="Store" options={{ animation: 'none' }} component={Store} />
</Stack.Navigator>

I don't think there is a Boolean variable controls the transition animation. So we can't directly hide the animation.

But there is a variable controls the animation duration !

Try this~ ↓

const RootStackNavigator = createStackNavigator({
  // ...
}, {
  transitionConfig: () => ({
    transitionSpec: {
      duration: 0,  // Set the animation duration time as 0 !!
    },
  }),
});

Update for react-native : 0.61.5

We were able to turnoff the animations/transitions using the below props in navigationOptions.

animationEnabled:false,
transitionConfig: () => ({
  transitionSpec: {
    duration:0,
    timing: 0,
  },
})

Other relevant packages that we're using are:

• "react-navigation": "~4.0.10"
• "react-navigation-stack": "^2.1.0"
• "react-native-screens": "2.0.0-beta.2"

If you're using @react-navigation/native-stack you can disable transition by using animation option of Stack.Navigator component.

// create Stack component
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

// use Stack component in JSX
<Stack.Navigator screenOptions={{ animation: 'none' }}>
    <Stack.Screen name={'Home'} component={Home} />
    <Stack.Screen name={'Page'} component={Page} />
</Stack.Navigator>

For my case, I'm disabling animation for home screen.

"react-navigation": "^4.3.9",

"react-navigation-stack": "^2.7.0",

const StackNavigator = createStackNavigator(
{
    SplashScreen: SplashScreen,
    MainScreen: {
        name: 'HomeScreen',
        screen: HomeScreen,
        navigationOptions: ({ navigation }) => ({
            animationEnabled: false,
            transitionConfig: () => ({
                transitionSpec: {
                    duration: 0,
                    timing: 0,
                },
            })
        }),
    },
},
{
    initialRouteName: 'SplashScreen',
    headerMode: 'none'
})

In the newest version of react-native (in my case: )

"react-native": "0.60.5",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",

just put the following config:

transitionConfig: () => ({
  transitionSpec: {
    timing: Animated.timing,
  },
  screenInterpolator: () => {},
}),

Simplest answer:

<NavigationContainer>
  <Stack.Navigator
    screenOptions={{
{/*        ||             ||
           \/             \/   */}
      animationEnabled: false
    }}
  >
    <Stack.Screen name="Landing" component={Landing}/>
    <Stack.Screen name="Register" component={Register}/>
  </Stack.Navigator>
</NavigationContainer>