Splash Screen quickly turns to white on React Native Android

Question

I added a splash screen to my app. The splash screen loads but then turns white for about 5 seconds before the app loads. I want to splash screen to stay on pretty much until the app comes up.

I tried following Sooraj's answer on this question, but they did not offer any explanation of their answer which doesn't work as it is written on the question. The main part which doesn't work is the line setContentView(R.layout.activity_splash); which creates an error when I try to build my app. When I delete the line, my app crashes once installed

MainActivity.java

package com.sealsounds;

import android.content.Intent;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
import com.sealsounds.SplashActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "SealSounds";
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent i = new Intent(this, SplashActivity.class);
        startActivity(i);
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

SplashActivity.java

package com.sealsounds;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;

public class SplashActivity extends ReactActivity {

    private static int SPLASH_TIME_OUT = 5000;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                finish();
            }
        }, SPLASH_TIME_OUT);
    }
}

user_9756445 · Answer

So reason this issue you are facing is:

 1. When  Javascript loads & the bridge is initialized.
 2. Then you see splash screen when the app is first booted up implemented on native side. 
 3. Now React Native initialize at that time we get a white
    screen for fraction of second

You can follow this article to add splash screen this is correct way to implement splash screen splash-screen-in-react-native

user_6331353 · Answer

I removed the code that I had added in my previous implementation and started over on implementing a splash screen.

These instructions are modified from the documentation at react-native-splash-screen, you can visit this link if you also want the instruction for iOS

On the command-line run

yarn add react-native-splash-screen

Edit MainActivity.java

...
//Splash Screen stuff
import android.os.Bundle; 
import org.devio.rn.splashscreen.SplashScreen;
// for react-native-splash-screen < 0.3.1 replace the line above with the line below
//import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainActivity extends ReactActivity {

    ...    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    ...
}

Create a file called launch_screen.xml in app/src/main/res/layout (create the layout-folder if it doesn't exist). The contents of the file should be the following:

create your launch screen image and name it launch_screen.png copy it to the following folders inside android/app/src/main/res

drawable
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi

Add the line below to your main App.js file

import SplashScreen from 'react-native-splash-screen'

Inside your main App.js class add the following to your ComponentDidMount() function

export default class App extends React.Component {
    ...
    componentDidMount() {
        SplashScreen.hide();
    }
    ...
}

Splash Screen quickly turns to white on React Native Android

2 Answers