Possible navigation issue in React Native/Redux app

Question

During navigation in big React Native app with using Redux all visited scenes (scenes from navigation stack) are staying mounted. All these scenes receive props and get rendered in the order they were visited when any action is dispatched from last scene component. It causes freezes and visible delays between dispatching and last scene rendering.

For navigation I am using react-native-router-flux but same issue happens with original React Native Navigator too.

Video Possible navigation issues in React Native/Redux app

Code react-redux-navigation-test

Would be nice to know how to prevent passing props to not focused components from the navigation chain.

At the moment I am checking in shouldComponentUpdate of each component if this one is focused(visible) and return false in opposite case.

Is there any better solution?

Answer 1

I recommend that you calculate the scene distance between the current scene and scene being rendered using the navigation index in the scene and header rendering methods. If the distance > 1 return null.

This should prevent rendering the entire navigation history. It doesn't make any sense to me that this kind of behaviour is not available out of the box, but there it is.