title: React Native navigator with persistent scenes
body: <p>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:</p>
  <h2><em>Users can switch between navigator scenes without losing their scroll position...</em></h2>
  <p><a href="https://i.stack.imgur.com/ggjC9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ggjC9.png" alt="navigator interaction with persisteent panels" /></a></p>
  <hr />
  <p>By default, the React <a href="https://facebook.github.io/react-native/docs/navigator.html" rel="nofollow noreferrer"><code>Navigator</code></a> component wants to re-render each scene when the user switches tabs.  This has two drawbacks:</p>
  <ul>
  <li>For complex scenes, there is a needless delay while the scene re-renders itself.</li>
  <li>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)</li>
  </ul>
  <h2>Question: is there a way to persist scenes between navigator changes that avoids re-rendering them?</h2>
  <p>I'm using the following component layout for my navigator pattern:</p>
  <p><a href="https://i.stack.imgur.com/ow5gG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ow5gG.png" alt="enter image description here" /></a></p>
  <p>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.</p>