NavigationExperimental is broken when native animations are used

[bendman]

Description

NavigationExperimental always renders the last card in a stack after completing the first transition, even if the last card wasn't the target. It only (and always) occurs if enableGestures={false}, which is required if you want to take advantage of native animations.

Expected:

1. Render a CardStack with two cards, 0 and 1, starting on 1
2. Trigger a transition to card 0
3. Card 0 is animated into frame
4. After animation, card 0 is shown

Actual:

1. Render a CardStack with two cards, 0 and 1, starting on 1
2. Trigger a transition to card 0
3. Card 0 is animated into frame
4. After animation, card 1 is shown

Reproduction

RNPlay uses an old version of React Native, so it can't be used to reproduce this bug. The bug is visible by running the reduced case in this repository: https://github.com/bendman/rn-navigator-bug

Solution

A temporary fix for library consumers is to remove enableGestures="false", thereby not taking advantage of native animation optimizations that were made available in this commit. This also prevents consumers from disabling gestures.

That solution isn't great because it forces a fallback to JS animation, which is slower. A more permanent solution would be to fix the native animation to render the correct card after a transition.

A middle-ground solution would be to add a separate flag for enableNativeAnimation={bool}, allowing consumers to set:

enableNativeAnimation={false}
enableGestures={false}

This would make it possible to disable gestures while still having a working navigator.

Additional Information

• React Native version: 0.39.0
• Platform: iOS (similarly reported in android)
• Operating System: MacOS

[janicduplessis]

There were quite a few bugs with native animations on iOS that were fixed by c858420. Can you try 0.40 which includes this commit to see if that solves this issue?

[denisw]

@janicduplessis I can confirm that the bug is unfortunately not fixed in 0.40. Also, trying to pop a card with a vertical animation results in an "attempting to run JS driven animation" error, but only if enableGestures is false.

[janicduplessis]

@denisw Could you try with this PR #11819 (react-native@janicduplessis/react-native#native-animations-default-values)?

[denisw]

@janicduplessis Yes, this fixes the problem described in this issue! Thanks. :) However, the vertical pop animation of NavigationCardStack still gives me the "Attempting to run JS driven animation" error, but perhaps I should open a separate issue for that.

[janicduplessis]

Cool, I'll have a look at that other issue next week.

[denisw]

I found the other issue, which is (partly) in my code: because useNativeDriver is set to false if gestures are disabled, there is a seems to be a mix of native and JS animations if you disable them conditionally (we only disable them for vertically transitioned screens, i.e. modals). I guess we need to change this behavior on our side until native animations are also possible with gestures enabled.

[janicduplessis]

You can use the private api animatedValue.__isNative to know if an animated value is native if that can help in your case.

[nihgwu]

@denisw FYI, you can turning on Native Animation manually by modify the source code or extend from NavigationCardStack, not only when disabled gestures

[asciiman]

I need to programmatically switch enableGestures and kept getting the "attempting to run js driven animation on animation node" error. Here's how I solved it.

    const enableGestures = currentNavigationState.showBackButton || false;
    // Adding props here is a hack that avoids an "attempting to run js driven 
    // animation on animation node" error when enableGestures is set to false.
    // So we just use the enableGestures property when we need to.
    const props = enableGestures ? { enableGestures } : {};
    return (
      <NavigationCardStack
        {...props}
      />
    );

[hramos]

Navigation Experimental has been deprecated in favor of the react-navigation library.