Android: Flash before SplashScreen.hide();

[anshul-kai]

Noticing a flash upon load on Android no matter how I modify my configuration. The flash goes to white if background_splash.xml is removed, the flash goes to white instead.

MainActivity.java

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

launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/screen" android:scaleType="centerCrop" />
</RelativeLayout>

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen">
        <!-- Customize your theme here. -->
        <item name="android:windowBackground">@drawable/background_splash</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowDisablePreview">true</item>
    </style>
</resources>

background_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:gravity="fill" android:src="@drawable/screen"/>
    </item>
</selector>

[chr4ss1]

I fixed the "white flashing issue", however not 100% sure which part fixed it.

Here is the tutorial I followed: https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae

After that tutorial, I had white flashing.

Then I applied the next changes in the styles.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowDisablePreview">true</item>
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>

    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>
</resources>

and it started to work (no flashing white)

[josecarlosns]

@ChrisEelmaa I'm having this issue too and your fix worked for me.

I tested a little and what seems to happen is that the flash is actually the empty MainActivity showing for an instant, before the interface renders. So your fix works because you set the background color/image of the base application AppTheme to be the same of the Splash Screen, so the 'flash' is still happening, but its of the same color so you don't notice it.

You can even remove the <item name="android:windowDisablePreview">true</item>, it doesn't matter for this issue.

[junkdeck]

creating a bitmap xml in app/src/main/res/drawable-xhdpi with the following

<?xml version="1.0" encoding="utf-8"?>
<bitmap
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:gravity="fill"
  android:src="@drawable/launch_screen"
  />

then using bitmap.xml in AppTheme solved the issue for me. no flash of any color, just a direct fade in to the splash image.

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowIsTranslucent">true</item>
      <item name="android:colorBackground">@color/primary_dark</item>
      <item name="android:windowBackground">@drawable/scaled</item>
    </style>

    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowIsTranslucent">true</item>
      <item name="android:colorBackground">@color/primary_dark</item>
      <item name="android:windowContentOverlay">@drawable/launch_screen</item>
    </style>

</resources>

[junkdeck]

shwoops, nevermind, the image is still squashed/stretched depending on your device's screen dimensions.

[djorkaeffalexandre]

Any updates? I have a problem when app open.. On startup it show a white screen before the black splash screen...

[brdar]

I have figured out that if you override splash screen style with some not properly configured style then white screen shows up and fade animation does not work: SplashScreen.show(this, R.style.AppTheme);

The thing is your custom style must be a child of SplashScreen_SplashTheme. So let's create simple style:

   <style name="RNSplashScreenTheme" parent="SplashScreen_SplashTheme">
        <item name="colorPrimaryDark">@color/trawel_blue</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>

And setting this style goes like: SplashScreen.show(this, R.style.RNSplashScreenTheme);

This should eliminate white screen flicker and fades should work.

[ahmed-ismail-nt]

I tested a little and what seems to happen is that the flash is actually the empty MainActivity showing for an instant, before the interface renders. So your fix works because you set the background color/image of the base application AppTheme to be the same of the Splash Screen, so the 'flash' is still happening, but its of the same color so you don't notice it.

This is exactly what is happening and introduces its own issue. When you open a keyboard, the background of the MainActivity (your splash screen) can sometimes show for a fraction of a second while the keyboard is scrolling up into view.

Basically, pick your poison: either you get a white flash between the splash screen and the app loading or a flash of your splash screen when the keyboard opens.

EDIT: For what it's worth, this is mostly happening in production. SplashScreen.hide() fades properly in development.

[Allyday]

I have found a workaround: Instead of hiding the splash screen in App.js, hide it in the first screen(s) that you know would be mounted. This is because it takes from 150-600ms for the React Native's JS bundle to load (development mode).

Or to be safe, call SplashScreen.hide() when your Router/Navigator is mounted. This makes sure that even if you start your app from a notification or a deep link, the splash screen will still hide correctly.

For reference, my app's timeline in production with timestamps: iOS Simulator (flash lasts 150ms) :

Android Emulator (flash lasts 600ms):

[narendra-gowda]

@brdar setting the parent as "SplashScreen_SplashTheme" worked flawlessly. I tried many solutions but none worked, apart from yours. Thank you