title: React Native - fade splash screen into initial React View gracefully?
body: <p>Forgive me in advance for a question that may be construed as "asking for advice" instead of a purely technical problem. Knowing StackOverflow, the response may be swift and brutal.</p>
  
  <p>I've just finished building out a cross platform (iOS and Android) app with React Native, and am in the last stages of preparing it for production. One of the tasks that needs to get done is splash screens.</p>
  
  <p>Unfortunately, I have some pretty complicated design requests. I have an example app to work off called <a href="https://play.google.com/store/apps/details?id=co.bitfinder.awair&amp;hl=en" rel="nofollow noreferrer">Awair</a>.</p>
  
  <p>Here is the basic idea: the splash screen has a logo on it. The initial React  Native screen has the exact same logo on it, with the exact same dimensions, in the exact same placement.</p>
  
  <p>The net effect is that the splash screen seamlessly fades into the actual running RN app. After that fade, we'll animate the logo upwards, etc (unrelated to this question).</p>
  
  <p>Here's an example:</p>
  
  <p><strong>Splash screen:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/BJyHy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BJyHy.png" alt="enter image description here"></a> </p>
  
  <p><strong>Initial React Screen:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/LuHNI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LuHNI.png" alt="enter image description here"></a></p>
  
  <p><strong>Combined Effect:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/vYRm1.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vYRm1.gif" alt="enter image description here"></a></p>
  
  <p>Obviously splash screens are almost entirely platform specific, and relatively annoying to set up. It seems to me that the hardest part of this functionality is ensuring the logo in the splash screen and the logo in the initial React screen are the same size, because one is controlled by RN abstractions and the other is a pure platform UI Image View.</p>
  
  <p>Has anyone built anything like this in React Native? Any advice?</p>