react-native-router-flux: Race condition when quickly navigating between scenes

Version

  • react-native-router-flux v3.35.0
  • react-native v0.34.1

Expected behavior

** From someSceneA ** Actions.someSceneB(dataObj); -> yields the expected view with dataObj ** Android back button is pressed to return to someSceneA ** (quickly do:) Actions.someSceneB(otherDataObj); -> instantiates someSceneB with otherDataObj

Actual behavior

* From someSceneA* Actions.someSceneB(dataObj); -> yields the expected view with dataObj ** Android back button is pressed to return to someSceneA ** (quickly do:) Actions.someSceneB(otherDataObj); -> re-renders someSceneB with dataObj

Current fix

It seems like what’s happening above is a race condition, where if you try to navigate too quickly to a component that you’ve already been to, but with a new data object, it will not re-render that component with the new data. If you wait for a second for the animations to complete, the issue goes away.

In order to prevent the race condition described above, I’m doing:

    const onPress = () => {
      InteractionManager.runAfterInteractions(() => {
        Actions.someSceneB({ data });
      });
    };

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 9
  • Comments: 15

Commits related to this issue

Most upvoted comments

I got this problem too. Tapping “back” button and then quickly tapping to another menu item rendered scene with previous props.

I did as @erikandersson suggested in a related issue:

<Router duration={150} ...>

It solved the problem! And it actually works for any value I tested between 50ms and 400ms, for some reason…

Almost same problem here. scenario:

  1. Actions.page1(); -> opens page 1
  2. Back with android back button or with Action.pop();
  3. Then opens Actions.page2() quickly -> i will see page1 for almost half second, then page 2 appears.

my guess is its happen when Action.pop() didnt finish yet.

IMO - as long as this library is using the forked version of RN ExerpimentalNavigation, that was forked almost a year ago, it’s not a great decision to continue using this library. I don’t fault the authors at all, it’s really hard to maintain a library w/RN constantly changing its API.

I’m now using react-navigation, which has good community support and the API behaves pretty similarly to this one. Hopefully it’ll be the last router based refactor I do for a while.

I’m closing this since it’s unlikely to be fixed and there’s a few workarounds. IMO the best workaround is moving to react-navigation.

+1

This is driving me nuts.

Looking through the source code, I believe the issues stems from the react-native NavigationExperimental component. There is a method handleNavigation that react-native-router-flux relies on. That method calls setState(), for navigation purposes. I believe the issue that is occurring is the result of the state change not being finished.

If handleNavigation could return the 2nd argument of setState() which is a callback when it’s finished, we could use that to sync operations and avoid the race condition. Actions.pop() already returns the result of handleNavigation.

The problem obviously is that changing NavigationExperimental is not possible from this project, and I don’t have the context for why handleNavigation was designed the way it is. So this issue may be fairly challenging to solve.

I will use @dannycochran 's solution for now.