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?

Thanks for your good question. – AmerllicA Jul 12 '20 at 14:16 — AmerllicA, Jul 12 '20 at 14:16

wobsoriano · Answer 1 · 2022-06-06T08:25:34.380

82

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/

edited Jun 06 '22 at 08:25

answered Feb 15 '20 at 17:15

wobsoriano

12,348
24
92
162

7

or to turn it off in the whole navigation stack: `` – Elias May 04 '20 at 14:57
4

If you're setting this on a per-screen basis, note that you need to disable `animationEnabled` on the screen you're navigating TO, not from. It can be a little bit confusing since a transition involves 2 screens. – starlabs May 20 '20 at 15:21
2

This seems very limiting. I would rather be able to disable the animation a the time I'm navigating to the screen. For instance, if there's a screen I want to animate most of the time with a few edge case exceptions. It would be nice to just turn it off when I need to. – Euroclydon37 Jan 06 '21 at 21:30
1

@Euroclydon37 you can enable it in the screen via [setOptions](https://reactnavigation.org/docs/navigation-prop/#setoptions) – wobsoriano Jan 07 '21 at 09:18
1

@wobsoriano Ooooooo... I'll mess around with that. Thanks! – Euroclydon37 Jan 07 '21 at 15:26
5

For react navigation v6, it's now `` – Florent Roques Dec 26 '21 at 20:26
1

@FlorentRoques THANK YOU. This needs to be higher. I thought I was going crazy. The docs on the website still reference animationEnabled. – Kyle J Jun 06 '22 at 00:57
1

In React Navigation 6 how can you disable it (or enable it) for specific screens? – yem Jun 15 '22 at 18:57

Maximilian Dietel · Answer 2 · 2022-05-19T06:47:18.110

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>

score 8 · Answer 3 · answered Sep 13 '18 at 07:01

8

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)

answered Sep 13 '18 at 07:01

crystal_17

719
5
13

1

Where are `Animated` and `Easing` imported from? – ksav Jun 10 '21 at 23:28

score 8 · Answer 4 · answered Jan 23 '20 at 23:11

8

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.

answered Jan 23 '20 at 23:11

Fook

5,320
7
35
57

s1ro6 · Answer 5 · 2018-09-13T07:04:40.210

5

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 !!
    },
  }),
});

edited Sep 13 '18 at 07:04

answered Sep 13 '18 at 06:59

s1ro6

161
8

unfortunatelly it still animated on fireing `navigation.goBack()` – gazdagergo Oct 04 '18 at 11:59

score 5 · Answer 6 · answered Feb 07 '20 at 07:01

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"

score 3 · Answer 7 · answered Mar 27 '22 at 14:59

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>

score 2 · Answer 8 · answered Jun 20 '20 at 13:52

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'
})

score 1 · Answer 9 · answered Oct 29 '19 at 20:04

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: () => {},
}),

score 1 · Answer 10 · answered Aug 25 '21 at 15:19

Simplest answer:

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

score 1 · Answer 11 · answered May 21 '23 at 06:22

1

<Stack.Screen name='Timeline' component={Timeline} options={{ animation: 'none', headerShown: true, headerTitle: "Timeline" }} />

Just pass "animation as none" with options

answered May 21 '23 at 06:22

Kapil Kumar

143
3

How to disable react navigation's stack navigator transition?

11 Answers11

React Navigation v6:

Linked