How to Remove White Screen after Splash Screen in React Native For Android

Question

I have a default react native project I installed from this turorial and I added a splash screen to my Project with this tutorial. However, now I get:

• a 0.5 secend splash screen photo
• then 1.5 secend white screen
• and after that my app started,

What is the best and most standard way to fix this problem? I need my splash screen for 1 secend and after that my app should start, I have read more articles but I couldn't find a fix for react native.

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme">
  <activity
    android:name=".SplashActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize"
    android:theme="@style/SplashTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name=".MainActivity" />
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

Answer 1

I too have been through this problem. In my case it was redux persist library that use to extract persisted state from storage and feed it into the reducers and this process use to take almost 1 second during that second it used to show white screen a little flicker and then it renders the actual screen.

The work around i used is this actually the control to hide splash is on javascript side you are doing this to hide it.

componentDidMount() {
    SplashScreen.hide();
}

Just add a little delay and it will work fine.

componentDidMount() {
    setTimeout(() => SplashScreen.hide() , 2000);
}