Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Push animation between screens not working

See original GitHub issue

This is the version that was working for me:

    "@react-navigation/bottom-tabs": "^5.10.2",
    "@react-navigation/native": "^5.8.2",
    "@react-navigation/stack": "^5.11.1",
    "react": "17.0.1",
    "react-native": "0.63.3",
    "react-native-screens": "^2.12.0",

I recently updated to this version and on iOS, navigation no longer has any animation, it happens instantly:

    "@react-navigation/bottom-tabs": "^5.11.1",
    "@react-navigation/native": "^5.8.9",
    "@react-navigation/stack": "^5.12.6",
    "react": "17.0.1",
    "react-native": "0.63.3",
    "react-native-screens": "^2.14.0",

I have deleted Podfile.lock and npx pod-install ios, still not work.

When I changed createNativeStackNavigator() to createStackNavigator(), it worked fine again with animation.

Please let me know if it’s a bug or what config I need to use to have the slide (push) animation?

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:7 (6 by maintainers)

Top GitHub Comments

2reactions

longpraocommented, Nov 13, 2020

@dylancom hey thanks for that, I’m using exactly the same thing too.

1reaction

WoLewickicommented, Nov 16, 2020

I tested the reproduction and I can spot this bug too. Until we find the solution, the workaround is to set detachInactiveScreens to false on iOS in the stack navigator.

Top Results From Across the Web

Flutter Transition Animation Issue while pushing new screen ...

When using Navigator.of(ctx).push the app tries to push new screen on root navigator, which in your case is tab bar but it fails...

Stack Navigator | React Navigation

Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack....

Add, change, or remove transitions between slides

Click the slide that you want to have no transition. Then, on the Transitions tab, in the Transitions gallery, click None.

The challenge of getting screen transitions right - UX Collective

Push transitions are used between screens that are hierarchically at the same level and share the same plane. It's like they are all...

Start an activity using an animation - Android Developers

When you enable activity transitions in your app, the default cross-fading transition activates between the entering and exiting activities. Figure 2. A scene ......