White screen before splash screen react native

Question

I face a problem, When I run the App I have a white screen stay for 2 seconds before my splash screen, How to solve this problem, I am using React-native version 61, I need to remove that white screen that appears before my splash screen, It appear for just 2 seconds but I need to delete it, I searched and tried that,

<item name="android:windowDisablePreview">true</item> in android but it doesn't solve the problem

here is my code "AppInitializer"

import React from 'react';
import {Alert} from 'react-native';
import AppNavigator from './router';
import SplashScreen from './SplashScreen';
import {InitializApp} from './actions/SettingsActions';
import {connect} from 'react-redux';
import NavigationService from './util/NavigationService';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {fcmService} from './util/FCMService';
class AppInitializer extends React.Component {
  constructor(props) {
    super(props);
  }
  async componentDidMount() {
    /*************************************
     *       Push Notification
     *************************************/

    fcmService.requestPermission();
    await fcmService.registerAppWithFCM();
    await fcmService.register(
      onRegister,
      onNotification, // inapp notification
      onOpenNotification, // fron notification center
    );
    async function onRegister(token) {
      const oldDeviceToken = await AsyncStorage.getItem('deviceToken');
      if (oldDeviceToken != token) {
        await AsyncStorage.setItem('deviceToken', token);
        // await AsyncStorage.setItem('oldDeviceToken', oldDeviceToken);
      }
    }

    function onNotification(notify, data) {
      console.log('onNotification', notify);
      console.log('onNotification', data);
      let buttons = [];

      if (data.hasOwnProperty('type') && data.type == 'category') {
        buttons[0] = {
          text: 'إلغاء',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        };
        buttons[1] = {
          text: 'اذهب للقسم',
          onPress: () => {
            NavigationService.navigate('categorydetails', {
              category_id: data.id,
            });
          },
        };
      } else if (data.hasOwnProperty('type') && data.type == 'product') {
        buttons[0] = {
          text: 'إلغاء',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        };
        buttons[1] = {
          text: 'اذهب للمنتج',
          onPress: () => {
            NavigationService.navigate('productdetails', {
              product_id: data.id,
            });
          },
        };
      } else {
        buttons[0] = {
          text: 'موافق',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        };
      }
      Alert.alert(notify.title, notify.body, buttons, {cancelable: true});
    }

    function onOpenNotification(notify, data) {
      console.log('onOpenNotification', data);
      if (data.hasOwnProperty('type') && data.type == 'category') {
        NavigationService.navigate('categorydetails', {
          category_id: data.id,
        });
      } else if (data.hasOwnProperty('type') && data.type == 'product') {
        NavigationService.navigate('productdetails', {
          product_id: data.id,
        });
      } else {
        Alert.alert(
          notify.title,
          notify.body,
          [
            {
              text: 'موافق',
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel',
            },
          ],
          {cancelable: true},
        );
      }
    }
    /*************************************
     *       Push Notification
     *************************************/
    this.props.InitializApp();
  }
  render() {
    if (this.props.Loaded) {
      return (
        <AppNavigator
          ref={navigatorRef => {
            NavigationService.setTopLevelNavigator(navigatorRef);
          }}
        />
      );
    } else return <SplashScreen />;
  }
}

const mapStateToProps = state => ({Loaded: state.settings.Loaded});
const mapDispatchToProps = dispatch => ({
  InitializApp: () => dispatch(InitializApp()),
});
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(AppInitializer);

Answer 1

you need to do this process while splash is visible to user right now render won't be able to display anything so you will get nothing just white screen...

please use this "npm i react-native-splash-screen --save" configure properly then check again...