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

This was my solution for IOS - 2021 on RN v.063

from the React Native documents https://reactnative.dev/docs/publishing-to-app-store#pro-tips

1. Search and find your AppDelegate.m file
2. Add this code
3. Re-build the app (so stop the app and start it again)

// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"
  UIStoryboard *sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];
  UIViewController *vc = [sb instantiateInitialViewController];
  rootView.loadingView = vc.view;

here is the React Native docs message

As your App Bundle grows in size, you may start to see a blank screen flash between your splash screen and the display of your root application view. If this is the case, you can add the following code to AppDelegate.m in order to keep your splash screen displayed during the transition.

Here is another solution for both ios and android: https://github.com/mehcode/rn-splash-screen. I hid the splash screen in the render function of my app.tsx (the entry point) and showed the same image until all of my https requests were done.

My code:

public render()
    {
        SplashScreen.hide();

       //after everything has finished loading - show my app.
       if (this.state.isFinishedloading) 
        {
            return (
                <this.navigator screenProps={{ ...providers }} />
            );
        }

      // Until then show the same image as the splash screen with an ActivityIndicator.
        return (
           <View style={{ flex: 1 }}>
              <Image style={styles.image} source={require('../assets/img/splash.png')} >
                <ActivityIndicator  style={styles.indicator} color="#fff"></ActivityIndicator>
              </Image>
           </View>
        );

    }

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);
}

I fix this by following steps mentioned by @sergiulucaci on GitHub like this and it worked

Go to android/app/src/main/res/values/styles.xml

Disable the app's preview as follows:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowDisablePreview">true</item> // <--- ADD THIS
        // Other items...
    </style>
</resources>