navigation.replace animation with 2.0.x

[cristianoccazinsp]

With version 2, navigation.replace will also animate. I wonder how can I disable the transition animation just for .replace calls? I want to keep the animation when doing .navigate, but no when replacing.

Ideally, however, I want the .replace call to just animate "backwards". I'm using replace to go to a previous screen which I unmount since it's too heavy. How can I achieve that?

[cristianoccazinsp]

Resolved with the following work around: Pass a route param animate: false when going to this screen with a .replace call. Then on the screen mount, set it back to true so leaving the screen still animates. Quite hackish if you ask me.

Would it be too hard for .replace to receive a "direction" prop or something for the animation?

[winkelsdorf]

Same applies for .reset. Behavior changed with 2.0.x.

Edit: Documented as breaking change with the initial release of 2.0.1, see https://github.com/react-navigation/stack/releases/tag/v2.0.1.

[satya164]

Ideally, however, I want the .replace call to just animate "backwards". I'm using replace to go to a previous screen which I unmount since it's too heavy. How can I achieve that?

As of the latest version, you can use animationTypeForReplace: 'pop' to achieve it.

https://reactnavigation.org/docs/en/stack-navigator.html#animationtypeforreplace

[iiAtlas]

For anyone looking at this in React Navigation v5, the animationTypeForReplace property should be used under a screens options https://reactnavigation.org/docs/stack-navigator/#animationtypeforreplace

<Stack.Navigator initialRouteName='main' screenOptions={{ headerShown: false }}>
        <Stack.Screen
            name='login' component={LoginScreen}
            options={{animationTypeForReplace: 'pop'}}>
        </Stack.Screen>
        <Stack.Screen name='done' component={DoneScreen}></Stack.Screen>
 </Stack.Navigator>