React-native-splash-screen: Getting white screen after splash screen

[aditya27dev]

I have followed all of the steps and below is my MainActivity.java file:

package com.test;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "test";
    }
}

Still i am getting white screen after splash screen

[julianoabrs]

Same issue here

[aditya27dev]

@julianoabrs solved by following these steps... remove react-native-splash-screen

https://android.jlelse.eu/change-splash-screen-in-react-native-android-app-d3f99ac1ebd1

[tjkang]

if anyone use react-native-vector-icons, make sure you update those fonts(Octicons.ttf and etc) in assets/fonts.
it works fine on iOS but on android, whenever the app is installed then sometimes it gets blank white screen after splash, but it works fine sometimes as well. it is just randomly happened
once i updated them, it works fine

[sangupandi]

Any updates?

[top-master]

I do not know why, but after setting header : null for my login-page, it at last fades into my login-view instead of into pure white...

Example

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

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

import {
    createStackNavigator, createAppContainer,
    NavigationContainer
  } from 'react-navigation';

import LoginView from '@app/login.view';
import MainView from '@app/main.view';

const RootStack: NavigationContainer = createStackNavigator({
    login: {
      screen: LoginView,
      navigationOptions: {
        title: 'login',
        header : null
      },
    },
    main: {
      screen: MainView
    }
  });

const AppContainer = createAppContainer(RootStack);

interface Props {}
export default class App extends Component<Props> {
  componentDidMount() {
    SplashScreen.hide();
  }
  render() {
    return (
      <AppContainer />
    );
  }
}

Edit: If you allow a rough guess, I think the react-navigation library does render the whole screen with nothing but white-color exactly at the starting moment, right when Android takes a snap-shot from the Activity for the fade-out effect, and later, once the fade-out effect is over, react-navigation has prepared itself, and finally shows what it really should be;
so, I think this issue is really not related to react-native-splash-screen library and we should close this ticket and create a new issue at react-navigation (in other words, where the root cause of the issue is)

[Allyday]

I have found a workaround: Instead of calling SplashScreen.hide() in App.js, do it when your Router/Navigator is mounted. This is because it takes from 150-600ms for the React Native's JS bundle to load (dev mode).

For more details: checkout https://github.com/crazycodeboy/react-native-splash-screen/issues/380#issuecomment-630549404

[daemswibowo]

@Allyday answer is correct. Thanks!

for anyone who is currently experiencing the same thing and use react navigation maybe this can help you a little:

// ... your other imports
import { NavigationContainer } from '@react-navigation/native';
import SplashScreen from 'react-native-splash-screen';

const App = () => {
     // Check when react navigation is ready
    const onNavigationReady = () => {
        SplashScreen.hide(); // just hide the splash screen after navigation ready
    }

    return (
        <NavigationContainer onReady={onNavigationReady}>
             ...
        </NavigationContainer>
    );
}