Navigation Experimental Transition Animations Freeze

[zachrnolan]

Description

We are experiencing a race condition where we try to set the state while the navigational experimental transition animation is still finishing, which freezes the screen. We have no way of knowing when this animation is finished, so not sure how to fix this.

It seems like Navigation Experimental is not respecting InteractionManager.runAfterInteractions (we tried it and it still let us update the state while the animation was halfway through). Does Navigation Experimental initiate a createInteractionHandle on start and clearInteractionHandle on completion?

Is there a way to know when the animation completes?

Additional Information

• React Native version: 0.35
• Platform: iOS
• Operating System: MacOS

[satya164]

cc @ericvicenti @hedgerwang

[anttimo]

NavigationTransitioner has onTransitionEndand onTransitionStart props you could try to use. I don't see NavigationTransitioner initiating createInteractionHandle.

What comes to the issue itself, I have had couple cases where animation transition ends until it's fully finished. I don't have any reproduction steps and it's really rare, so for me it could be that HMR or something else is causing it.

[K-Leon]

@anttimo i stumbled upon the same - it happenes as soon as an alert is triggered while transitioning. For example iOS asking for permissions.

[anttimo]

@zachrnolan @K-Leon have you turned on the native driver for your animations when this happens?

[K-Leon]

@anttimo IOS with Default Settings - so no native animations as far as i know (still not merged i think). For Android i used the native flag coming from this repo: #10289 without running into any issues.

Another interesting Fact is that everything works fine with an older version of navigation experimental. ( https://github.com/aksonov/react-native-experimental-navigation )

[ericvicenti]

I'd be happy to investigate the issue you're seeing, but I need help reproducing it.

NavigationTransitioner probably doesn't need to call createInteractionHandle because it automatically gets created by Animated:

react-native/Libraries/Animated/src/AnimatedImplementation.js

Line 829 in c996081

handle = InteractionManager.createInteractionHandle();

The problem with Alertand permissions that @K-Leon mentioned is a known problem, and we should create a separate issue for that. Does anybody have an idea on how that should be fixed?

[K-Leon]

@ericvicenti i opened an issue for this #10598

[zachrnolan]

@anttimo How do you turn on native driver for animations?

@ericvicenti one of our views that is having the issue calls a redux action to get data from the server (promise) using Redux Loop. When you first go to this screen it never seems to freeze during the navigation transition, however, when you push route to the same screen again (with unique key) it seems to freeze almost every time.

I'm thinking that there are the following cases:

1. Works Fine: The response happens very fast before the animation starts (animation works as expected)
2. Works Fine: The response takes a long time (if we setTimeout for a second) (animation works as expected)
3. Freezes: The response happens during the timeframe of the animation and it freezes.

[anttimo]

@zachrnolan You can see a example how it's done in the NavigationCardStack if you are not using it https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js#L221. I have turned nativeDriver off for now because of #10174.

[omeid]

We are experiencing the same problem, with and without the Native Animation.

@zachrnolan Does state change in your component result in any animations? Perhaps using LayoutAnimation?

I believe the freeze happens when two animations happens at once.

To make this even more interesting, doing Remote Debugging without the Native Animation, the transition never freezes, instead I get the following warnings where normally the app would freeze:
Warning: Overriding previous layout animation with new one before the first began.

[omeid]

So #10606 maybe related.

[ericvicenti]

Two animations at once? Can you avoid doing that?

If it is intentional, what would that look like?

[zachrnolan]

@omeid The state change does not result in any animations. I've been testing more on a physical device and the freezing is happening a lot less often. Seems to happen more frequently when using the simulator. It also seems to happen when you're deeper in a navigation stack.

[omeid]

@ericnakagawa Say a "Notification Status" slides down as your CardStack is transitioning. Similar to #10598.

@zachrnolan Hmmm. Do you use react-redux? What transitioner? CardStack? I am trying to figure out if we are facing the same issue.