White screen before splash screen #338

idlework · 2018-12-11T15:09:52Z

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:

I have added the package to my project
linked it to my project (manual and or with link)
added the show function to mainactivity.java
added the launch_screen.xml to the layout folder
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 · 2018-12-14T08:25:23Z

There's a hack for that.

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>

Thanks to #11 (comment)

Susmitha-Bogala · 2018-12-19T11:32:05Z

i am stii getting the white screen after adding that line

ghost · 2019-01-16T14:24:47Z

@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 · 2019-01-31T07:59:32Z

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

BenjErgizerBunny · 2019-01-31T13:33:52Z

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 · 2019-01-31T13:48:51Z

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

erennyuksell · 2019-02-24T07:52:21Z

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 · 2019-11-11T06:13:46Z

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 · 2019-12-19T16:53:52Z

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 · 2020-02-27T10:32:10Z

There's a hack for that.

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>
Thanks to #11 (comment)

Fixed my issue.

tsiory · 2020-05-11T10:29:37Z

There's a hack for that.

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>
Thanks to #11 (comment)

Works for me, THANK YOU!!!

hashinclude72 · 2020-06-10T12:39:38Z

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 · 2020-06-20T16:22:50Z

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 · 2020-09-25T07:23:24Z

There's a hack for that.

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>
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 · 2020-12-06T02:40:24Z

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

Garamani · 2021-04-29T04:37:06Z

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 · 2021-05-28T02:20:18Z

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 · 2021-07-07T14:09:57Z

There's a hack for that.

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>
Thanks to #11 (comment)

Solved my problem...

hsethiskillz · 2021-10-07T21:26:07Z

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 · 2021-10-10T15:55:08Z

<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 · 2021-10-24T01:20:11Z

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 · 2022-02-23T07:26:08Z

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 · 2022-07-12T13:10:24Z

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 · 2023-06-12T12:47:50Z

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

erennyuksell mentioned this issue Feb 24, 2019

White screen before splash screen #370

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

White screen before splash screen #338

White screen before splash screen #338

idlework commented Dec 11, 2018

sergiulucaci commented Dec 14, 2018

Susmitha-Bogala commented Dec 19, 2018

ghost commented Jan 16, 2019

amalan-shenll commented Jan 31, 2019

BenjErgizerBunny commented Jan 31, 2019

amalan-shenll commented Jan 31, 2019

erennyuksell commented Feb 24, 2019

DaminiRajput commented Nov 11, 2019

dariakoko commented Dec 19, 2019

akhila-antony commented Feb 27, 2020

tsiory commented May 11, 2020

hashinclude72 commented Jun 10, 2020

JeanMonteiro commented Jun 20, 2020

tunm1228 commented Sep 25, 2020

hkar19 commented Dec 6, 2020

Garamani commented Apr 29, 2021

RazaShehryar commented May 28, 2021

arxoft commented Jul 7, 2021

hsethiskillz commented Oct 7, 2021 •

edited

ghost commented Oct 10, 2021

kishieel commented Oct 24, 2021

ouweiya commented Feb 23, 2022 •

edited

prakashkrsingh0 commented Jul 12, 2022

TeJasx16 commented Jun 12, 2023

White screen before splash screen #338

White screen before splash screen #338

Comments

idlework commented Dec 11, 2018

sergiulucaci commented Dec 14, 2018

Susmitha-Bogala commented Dec 19, 2018

ghost commented Jan 16, 2019

amalan-shenll commented Jan 31, 2019

BenjErgizerBunny commented Jan 31, 2019

amalan-shenll commented Jan 31, 2019

erennyuksell commented Feb 24, 2019

DaminiRajput commented Nov 11, 2019

dariakoko commented Dec 19, 2019

akhila-antony commented Feb 27, 2020

tsiory commented May 11, 2020

hashinclude72 commented Jun 10, 2020

JeanMonteiro commented Jun 20, 2020

tunm1228 commented Sep 25, 2020

hkar19 commented Dec 6, 2020

Garamani commented Apr 29, 2021

RazaShehryar commented May 28, 2021

arxoft commented Jul 7, 2021

hsethiskillz commented Oct 7, 2021 • edited

ghost commented Oct 10, 2021

kishieel commented Oct 24, 2021

ouweiya commented Feb 23, 2022 • edited

prakashkrsingh0 commented Jul 12, 2022

TeJasx16 commented Jun 12, 2023

hsethiskillz commented Oct 7, 2021 •

edited

ouweiya commented Feb 23, 2022 •

edited