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

The problem is indeed that the whole navigation stack is connected to the store( because components are not unmounted unless you use resetto or resetnavigation )

For what it's worth here is what I do right now. I have been working with a slightly modified react redux implementation that skips updates for scenes that are not in view ( see below )

To use it you need to:

Store the route for one component tree in context

We created a wrapper for this

const CurrentRoute = React.createClass({ 
childContextTypes : { currentRoute: PropTypes.object },
 getChildContext() {
 return { currentRoute: this.props.route } 
},
render() { return this.props.children; } 
})

And use it in render scene

Then you can access the route a component has been rendered into.

Store the navigation stack in a singleton We use this code in configure scene

let routeStack = [];
export const updateRouteStack = stack => routeStack = stack;

Then you can use this slightly modified react-redux connect function, it will skip updates if component is rendered in another component tree then the currently displayed one ( or a similar implementation ) https://github.com/reactjs/react-redux/compare/master...ganmor:master

It might be possible to package this but I haven't had the time to look into it. If anyone feels like doing it.. Hope that helps