Status Bar Background

[archieherbias]

Is it possible to change the status bar color of the splashscreen?

[lone-cloud]

The easiest way that I found is to monkey patch your status bar color like <item name="colorPrimaryDark">#400101</item> into res/values/styles.xml's SplashScreen_SplashTheme from this library.

[Noor0]

status bar is black and the icons are also black this issue still persists

[AE0011]

this version works right: "react-native-splash-screen": "^3.0.6"

also add <color name="primary_dark">#2b8ce5</color> this in colors.xml

[chico]

It works as long as you also change your show method to include your custom style.

From the README:

If you want to customize the color of the status bar when the splash screen is displayed:

Create android/app/src/main/res/values/colors.xml and add

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="status_bar_color"><!-- Colour of your status bar here --></color>
</resources>

Create a style definition for this in android/app/src/main/res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
        <item name="colorPrimaryDark">@color/status_bar_color</item>
    </style>
</resources>

Change your show method to include your custom style:

SplashScreen.show(this, R.style.SplashScreenTheme);

[rizkiandrianto]

It works as long as you also change your show method to include your custom style.

From the README:

If you want to customize the color of the status bar when the splash screen is displayed:

Create android/app/src/main/res/values/colors.xml and add

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="status_bar_color"><!-- Colour of your status bar here --></color>
</resources>

Create a style definition for this in android/app/src/main/res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
        <item name="colorPrimaryDark">@color/status_bar_color</item>
    </style>
</resources>

Change your show method to include your custom style:

SplashScreen.show(this, R.style.SplashScreenTheme);

Hey @chico I got this error if I change my show method like this

[Noor0]

@rizkiandrianto the symbol after the R.style.<THEME_NAME> should match the name of the theme inside styles.xml

in my case the name of the theme was SplashTheme

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

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

so I'm passing R.style.SplashTheme to my SplashScreen.show()

SplashScreen.show(this, R.style.SplashTheme);

[OmarBasem]

For some reason addid SplashScreen.show(this, R.style.SplashTheme); causes white screen flash between splash screen and app mounting, any one facing the same issue or know a fix?

[kg-currenxie]

@ramon90 i fixed the white screen with

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:statusBarColor">@color/bg</item>
        <item name="android:windowIsTranslucent">true</item> <--------- add this
    </style>

[parth-koshta]

@RAMON90 i fixed the white screen with

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:statusBarColor">@color/bg</item>
        <item name="android:windowIsTranslucent">true</item> <--------- add this
    </style>

This didn't resolve white screen flash between splash screen and app mounting

[parth-koshta]

For some reason addid SplashScreen.show(this, R.style.SplashTheme); causes white screen flash between splash screen and app mounting, any one facing the same issue or know a fix?

were you able to solve this?

[Revolt9k]

If none of this methods allow you to trick conversion error, add true as a third arg of show method like this SplashScreen.show(this, R.style.SplashTheme, true); Change it to false to disable fullscreen

[JJalit]

I fixed this problem I just add true SplashScreen.show(this, true);

[moooss]

Something might have changed in last versions of android.

This gives me an error telling that the second argument should be a boolean: SplashScreen.show(this, R.style.SplashTheme);

And this makes the statusBar and the navigationBar with the background color: SplashScreen.show(this, true);

[Malik-Usman17]

Thanks for the solution, just a little change what I did is to add a third argument true (boolean value) in SplashScreen.show method