title: Splash Screen white flicker before loading (React Native Expo)
body: <p>When the app loads there is a white background then a flicker before the splash screen is shown. I have removed the splash screen from the app.json file since i am manually loading and hiding the splash screen. (Leaving the splash screen in the app.json file results in the splash screen being shown followed by a white flicker and then the splash scrren is shown again a second time)</p>
  
  <p>App.js</p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, View, Image } from 'react-native'
  import { MyAuthStack, MyMainDrawer } from './Screens/Navigators'
  import firebase from './firebase'
  import { AppLoading, SplashScreen } from 'expo';
  import { Asset } from 'expo-asset';
  
  export default class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        authState: false,
        imgUrl: '',
        isSplashReady: false,
        isAppReady: false,
      }
  
    }
    _cacheSplashResourcesAsync = async () =&gt; {
      const gif = require('./assets/splash.png');
      return Asset.fromModule(gif).downloadAsync();
    }
  
    _cacheResourcesAsync = async () =&gt; {
      SplashScreen.hide();
  
      const images = [
        require('./assets/addthreadicon.png'),
        require('./assets/500x500.png'),
      ];
      const cacheImages = images.map((image) =&gt; Asset.fromModule(image).downloadAsync());
  
      await Promise.all(cacheImages);
      firebase.auth().onAuthStateChanged(user =&gt; {
        if (user != null) {
          const userRef = firebase.database().ref(`users/${firebase.auth().currentUser.uid}/img`)
          userRef.once('value', snapshot =&gt; {
            this.setState({ imgUrl: snapshot.val(), authState: true, isAppReady: true })
          })
        } else {
            this.setState({ imgUrl: '', authState: false, isAppReady: true })
        }
      })
    };
    render() {
      const { isSplashReady, isAppReady, authState } = this.state;
      if (!isSplashReady) {
        return (
          &lt;AppLoading
            startAsync={this._cacheSplashResourcesAsync}
            onFinish={() =&gt; this.setState({ isSplashReady: true })}
            onError={process.env.NODE_ENV === 'production' ? undefined : console.warn /* eslint-disable-line no-console */}
            autoHideSplash={false}
          /&gt;
        );
      }
      return (
        &lt;View style={{ flex: 1 }}&gt;
          {!isAppReady ? (
            &lt;Image
              source={require('./assets/splash.png')}
              onLoad={this._cacheResourcesAsync}
              style={{ width: '100%', height: '100%' }}
            /&gt;
          ) : (
              &lt;View style={{ flex: 1 }}&gt;
                {authState ? (&lt;MyMainDrawer imgUrl={this.state.imgUrl} /&gt;) : (&lt;MyAuthStack /&gt;)}
              &lt;/View&gt;
            )
          }
        &lt;/View&gt;
      )
  
    }
  }
  
  });
  </code></pre>
  
  <p>app.json</p>
  
  <pre><code>{
    "expo": {
      "name": "Blank Template",
      "slug": "movie",
      "privacy": "public",
      "sdkVersion": "36.0.0",
      "platforms": [
        "ios",
        "android",
        "web"
      ],
      "version": "1.0.0",
      "orientation": "portrait",
      "icon": "./assets/icon.png",
      "updates": {
        "fallbackToCacheTimeout": 0
      },
      "assetBundlePatterns": [
        "**/*"
      ],
      "android": {
        "package": "com.saim.moviethreads",
        "versionCode": 1,
        "config": {
          "googleMobileAdsAppId": "" 
        }
      },
      "ios": {
        "supportsTablet": true,
        "bundleIdentifier": "com.yourcompany.yourappname",
        "buildNumber": "1.0.0"
      }
  
    }
  }
  </code></pre>