White flash after splash screen

[HerickRaposo]

My question:

I have a project created in React Native 0.64.2, int this version the splash splash screen worked normaly but when i created other project using the same code in React Native version 0.65.1 i sad a white flash after splash screen. How can i resolve this?

##My alternative solution. For i not stay whit this i insert splashScreen.hide() in setTimeOut code, but i know this isnt the correct solution

My code:

myProject/App.js

import React,{useEffect} from 'react';
import Routes from './src/routes';
import SplashScreen from 'react-native-splash-screen'
import 'react-native-gesture-handler';

export default function App() {
  useEffect(() => {
    SplashScreen.hide()
  }, []);
  return (
    <Routes />
  )
}

myProject/android/src/main/java/com/myProject/MainActivity.java

package com.myProject;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import cl.json.RNSharePackage;
import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.myProject.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

myProject/android/src/main/java/com/myProject/SplashActivity.java

package com.myProject;
import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

myProject/android/src/main/res/colors.xml

<resources>
    <color name="splashscreen_bg">#1c4154</color>
    <color name="app_bg">#1c4154</color>
    <color name="white">#fff</color>
</resources>

myProject/android/src/main/res/styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:textColor">#000000</item>
        <item name="android:statusBarColor">@color/app_bg</item>
        <item name="android:windowLightStatusBar">false</item>
        <item name="android:windowBackground">@color/app_bg</item>
    </style>

    <!-- Adds the splash screen definition -->
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:statusBarColor">@color/splashscreen_bg</item>
        <item name="android:background">@drawable/background_splash</item>
    </style>
</resources>

myProject/android/src/main/res/drawable/background_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/splashscreen_bg"/>

    <item
        android:width="300dp"
        android:height="300dp"
        android:drawable="@mipmap/splash_icon"
        android:gravity="center" />

</layer-list>

myProject/android/src/main/res/layout/launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_splash"
    android:orientation="vertical">
</LinearLayout>

My development informations:

OS:Android React version: 17.0.2 React Native version:0,65,1 Splash Screen version:3.2.0

[ratz6]

Hi, even I'm facing this. Did you find any solution ?

[IvKr95]

Try adding SplashScreen.show(this) to onCreate in your MainActivity not MainApplication

[PiotrNap]

Try adding SplashScreen.show(this) to onCreate in your MainActivity not MainApplication

Even that doesn't seem to be working.

[spinoza1791]

Had same issue, solution for android:

import React, { useState, useEffect } from 'react';

Then inside your const ScreenName

useEffect(() => { SplashScreen.hide(); });

[MuazzezA]

I have the same problem. does anyone have a solution?

this code is not related to the flash effect. A white screen comes before the splash screen appears. useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 100); }, []);