Splash Screen white flicker before loading (React Native Expo)

Question

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)

App.js

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 () => {
    const gif = require('./assets/splash.png');
    return Asset.fromModule(gif).downloadAsync();
  }

  _cacheResourcesAsync = async () => {
    SplashScreen.hide();

    const images = [
      require('./assets/addthreadicon.png'),
      require('./assets/500x500.png'),
    ];
    const cacheImages = images.map((image) => Asset.fromModule(image).downloadAsync());

    await Promise.all(cacheImages);
    firebase.auth().onAuthStateChanged(user => {
      if (user != null) {
        const userRef = firebase.database().ref(`users/${firebase.auth().currentUser.uid}/img`)
        userRef.once('value', snapshot => {
          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 (
        <AppLoading
          startAsync={this._cacheSplashResourcesAsync}
          onFinish={() => this.setState({ isSplashReady: true })}
          onError={process.env.NODE_ENV === 'production' ? undefined : console.warn /* eslint-disable-line no-console */}
          autoHideSplash={false}
        />
      );
    }
    return (
      <View style={{ flex: 1 }}>
        {!isAppReady ? (
          <Image
            source={require('./assets/splash.png')}
            onLoad={this._cacheResourcesAsync}
            style={{ width: '100%', height: '100%' }}
          />
        ) : (
            <View style={{ flex: 1 }}>
              {authState ? (<MyMainDrawer imgUrl={this.state.imgUrl} />) : (<MyAuthStack />)}
            </View>
          )
        }
      </View>
    )

  }
}

});

app.json

{
  "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"
    }

  }
}

Answer 1

Splash Screen flickers because you want to change the state of the application as soon as the splash screen loads. I suggest you use AppLoading from expo, this controls the visibility of the splash screen.

<AppLoading
   startAsync={*function to load when splash screen starts*}
   onFinish={set the state to finished here}
/>