title: White flickering when changing pages using an Image Background in React-native
body: <p><strong>The Problem</strong></p>
  
  <p>I have a Stack Navigator. When I switch from Page A to Page B (who uses the same <code>ImageBackground</code> component the next screen appears instantly but without the background Image. Only after about 1 - 2 seconds is it appearing. I use a background image (just a complex gradient which you can't do with <code>react-native</code>, so I exported it as image) for every page on my app. So I created a component called <code>Container</code> that just exports an <code>ImageBackground</code> with the passed in Background image. It looks like this:</p>
  
  <pre><code>const BackgroundImageContainer = styled.ImageBackground`
    justify-content: space-between;
    flex: 1;
  `;
  
  const Container = ({children}) =&gt; (
    &lt;BackgroundImageContainer
      source={require('../assets/Background.png')}
      style={{flex: 1, width: null, height: null}}&gt;
      {children}
    &lt;/BackgroundImageContainer&gt;
  );
  </code></pre>
  
  <p>I also have a tab bar and when I switch to different tabs the screen "flashes white" because I see the white background for a sec and then it shows the actual Background Image. </p>
  
  <p><strong>I think it has something to do with loading time of the image (although it's just 160KB).
  How do I load this image when the app starts and then "caches" it so it's available to all components "instantly" ?</strong> </p>