White screen before splash screen

[idlework]

After several tries of installing this component I still get the white background from my main activity before the splash screen is shown.

My installation steps are:

1. I have added the package to my project
2. linked it to my project (manual and or with link)
3. added the show function to mainactivity.java
4. added the launch_screen.xml to the layout folder
5. added the primary_dark color to my colors.xml.

But still I get the white background from my main activity. I could set the default color of the main activity, but this is not preferable.

Anyone has the this problem and solved it?

[sergiulucaci]

There's a hack for that.

1. Go to android/app/src/main/res/values/styles.xml
2. 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>

Thanks to https://github.com/crazycodeboy/react-native-splash-screen/issues/11#issuecomment-263278909

[Susmitha-Bogala]

i am stii getting the white screen after adding that line

[ghost]

@Susmitha-Bogala

What I did was to delay hiding the splash screen at the screen your app loads when starting up, like so:

 componentDidMount() {
    setTimeout(() => {
      SplashScreen.hide()
    }, 300)
}

You can experiment with the delay so it fits your app the best. Hope it helps!

[amalan-shenll]

@sergiulucaci but your solution makes the app to start after some delay. is anyone else facing the same issue with that solution

[BenjErgizerBunny]

I believe the reason you’re getting the white flash is because—on iOS as an example—Swift is loading in between the launch image and react native. React Native takes a second to load the splash screen and in between a white flash is seen.

This YouTube video was really helpful for me to get rid of it. https://youtu.be/H0CC1UsvjDQ

[amalan-shenll]

@BenjErgizerBunny but in my case for ios everything is fine, the white screen comes before splash only in android

[erennyuksell]

I'm facing the same issue @sergiulucaci's solution makes the app to start after some delay. https://www.youtube.com/watch?v=rnLR65OGtic i try this solution i can't apply my splash design because he is using layer-list instead of layout. Any other solution?

[DaminiRajput]

Hi, i think below given link can help you. https://stackoverflow.com/questions/44384491/how-to-remove-white-screen-after-splash-screen-in-react-native-for-android

[dariakoko]

Also had this issue.

Changing splash screen background color to the one which I use on the next screen saved the situation for both platforms

[akhila-antony]

There's a hack for that.

1. Go to android/app/src/main/res/values/styles.xml
2. 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>

Thanks to #11 (comment)

Fixed my issue.

[tsiory]

There's a hack for that.

1. Go to android/app/src/main/res/values/styles.xml
2. 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>

Thanks to #11 (comment)

Works for me, THANK YOU!!!

[hashinclude72]

I believe the reason you’re getting the white flash is because—on iOS as an example—Swift is loading in between the launch image and react native. React Native takes a second to load the splash screen and in between a white flash is seen.

This YouTube video was really helpful for me to get rid of it. https://youtu.be/H0CC1UsvjDQ

hey, same problem here did u find any other solution

[JeanMonteiro]

what worked for me : android/app/src/main/res/values/styles.xml ->

`

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:textColor">#000000</item>
    <item name="android:windowDisablePreview">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowIsTranslucent">true</item>
</style>

`

[tunm1228]

There's a hack for that.

1. Go to android/app/src/main/res/values/styles.xml
2. 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>

Thanks to #11 (comment)

I have encountered a case after hiding the splash screen the screen is white, has anyone encountered this situation like me

[hkar19]

is there any solution of React Native iOS build? i experienced white screen before splash screen for both platform.

[Garamani]

For me (using react-native-navigation and persistant redux) the only working solution is: setTimeout(() => { SplashScreen.hide(); }, 1000);

It gives some time to react-native-navigation to mount the next screen after splash.

[RazaShehryar]

For me (using react-native-navigation and persistant redux) the only working solution is: setTimeout(() => { SplashScreen.hide(); }, 1000);

It gives some time to react-native-navigation to mount the next screen after splash.

This works for me! Thanks

[arxoft]

There's a hack for that.

1. Go to android/app/src/main/res/values/styles.xml
2. 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>

Thanks to #11 (comment)

Solved my problem...

[hsethiskillz]

I am still getting the white blank screen before the splash screen. I have created my own splash screen though which loads important network calls such as authentication. After react-native bundle the application a white screen pops up for 1-2 seconds and then splash screen followed by main activity. I have tried almost every solution mentioned above but nothing is working. Did anyone face a similar issue after creating a custom Splash screen and solved it?

[ghost]

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

using this solved the problem but app is not open on click it take a second to show spalshscreen. Before: Click app icon -> white screen for half second -> splash screen After: Click app icon -> nothing for half second -> splash screen

using this solution is making app splash screen worse users will think that the app is slow.

[kishieel]

Another possible solution is to set the background of the screen instead of turning off the preview. This prevents any delay between clicking the app icon and launching the splash screen.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>

</resources>

[ouweiya]

Actually you don't need to depend on the library, you just need a simple setup.

drawable/launch_screen.xml

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="#fff" />
    </shape>
  </item>
  <item android:drawable="@drawable/home" android:gravity="center" android:top="-64dp" />
</layer-list>

drawable/home.xml Can be replaced with any of your vector graphics.

<vector
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="126dp"
  android:height="133dp"
  android:viewportWidth="126"
  android:viewportHeight="133"
>
  <path android:pathData="M31.5,56.7H12.6V100.8H31.5V56.7Z" android:fillColor="#323232" />
  <path android:pathData="M72.45,56.7H53.55V100.8H72.45V56.7Z" android:fillColor="#323232" />
  <path android:pathData="M126,113.4H0V132.3H126V113.4Z" android:fillColor="#323232" />
  <path android:pathData="M113.4,56.7H94.5V100.8H113.4V56.7Z" android:fillColor="#323232" />
  <path android:pathData="M63,0L0,31.5V44.1H126V31.5L63,0Z" android:fillColor="#323232" />
</vector>

values/styles.xml

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:statusBarColor">#fff</item>
    <item name="android:windowLightStatusBar">true</item>
    <item name="android:windowBackground">@drawable/launch_screen</item>
  </style>
</resources>

[prakashkrsingh0]

this solution worked for me. but I was try put this code in through VS code. and it was not reflected in android studio. when this solution is put via android studio. it worked for me. Thank you so much.

[TeJasx16]

Actually you don't need to depend on the library, you just need a simple setup.

drawable/launch_screen.xml

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="#fff" />
    </shape>
  </item>
  <item android:drawable="@drawable/home" android:gravity="center" android:top="-64dp" />
</layer-list>

drawable/home.xml Can be replaced with any of your vector graphics.

<vector
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="126dp"
  android:height="133dp"
  android:viewportWidth="126"
  android:viewportHeight="133"
>
  <path android:pathData="M31.5,56.7H12.6V100.8H31.5V56.7Z" android:fillColor="#323232" />
  <path android:pathData="M72.45,56.7H53.55V100.8H72.45V56.7Z" android:fillColor="#323232" />
  <path android:pathData="M126,113.4H0V132.3H126V113.4Z" android:fillColor="#323232" />
  <path android:pathData="M113.4,56.7H94.5V100.8H113.4V56.7Z" android:fillColor="#323232" />
  <path android:pathData="M63,0L0,31.5V44.1H126V31.5L63,0Z" android:fillColor="#323232" />
</vector>

values/styles.xml

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:statusBarColor">#fff</item>
    <item name="android:windowLightStatusBar">true</item>
    <item name="android:windowBackground">@drawable/launch_screen</item>
  </style>
</resources>

it worked for me but when my app is running and i opened the textinput then starting vector appers behind keyboard