This is a pretty common UX design pattern for apps, and I'm trying to figure out how best to implement this in React Native:

*Users can switch between navigator scenes without losing their scroll position...*
-----------------------------------------------------------------------------------

[![navigator interaction with persisteent panels](https://i.stack.imgur.com/ggjC9.png)](https://i.stack.imgur.com/ggjC9.png)

---

By default, the React [`Navigator`](https://facebook.github.io/react-native/docs/navigator.html) component wants to re-render each scene when the user switches tabs. This has two drawbacks:

* For complex scenes, there is a needless delay while the scene re-renders itself.
* When the user returns to a scene (e.g. home page), she loses her scroll position and any interim UX state on that scene (e.g. expanded cells, etc)

Question: is there a way to persist scenes between navigator changes that avoids re-rendering them?
---------------------------------------------------------------------------------------------------

I'm using the following component layout for my navigator pattern:

[![enter image description here](https://i.stack.imgur.com/ow5gG.png)](https://i.stack.imgur.com/ow5gG.png)

p.s. I know React's flux/routing pattern prefers to re-render the scene because it prefers UX state to be captured entirely in one route state object, but in this case I really want to avoid the disadvantages of re-rendering a panel since it creates a crappier user interface....Instagram is an example of an app which does this seamlessly.