Splash Screen white flicker before loading (React Native Expo) - react-native

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}
/>