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

Answer 1

We solved it by simply wrapping all screens in a component.

We have one ScreenView component that wraps the whole screen, and we pass it a parameter "restrictRerendersToRoutes".

This screen is connected to the state, and we update the currentScrene in our state and expose it to this screen view.

Then we simply restrict rerenders when the screen is in the background with this shouldComponentUpdate implementation:

  shouldComponentUpdate(nextProps) {
    if (!_.empty(this.props.restrictRerendersToRoutes)) {
      return !!this.props.restrictRerendersToRoutes
        .find((routeKey) => routeKey === nextProps.currentScene.name);
    }

    return true;
  }