Splash Screen Messing Status Bar Color/Style

[franciscopaglia]

Description of the problem: When starting an app, during the Splash Screen, the Status Bar will first set it's style/background color to the one defined my project, then the screen will blink, the Status Bar will be automatically set to its default style (Black background with white text) and only when the splash screen hides, it'll show my custom style again (either the one in the XML file, or inside my angular application defined via the Plugin). I need to be able to define the status bar color and style shown during the Splash Screen.

Affected platform

• Android
• iOS
• electron
• web

OS of the development machine

• Windows
• macOS
• linux

Other information: -

Capacitor version: 1.1.0

node version: v11.8.0

npm version: 6.9.0

CocoaPods version: -

Steps to reproduce: Create a brand new project, build project for the first time and open in Android Studio. Then set the Status Bar style either by:

        <item name="android:windowLightStatusBar">true</item>
        <item name="android:statusBarColor">#ecf0f1</item>

or define some custom colors via:

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

or Set the Status Bar color via the Plugin:

    this.platform.ready().then(() => {
      StatusBar.setBackgroundColor({ color: '#ecf0f1' });
      StatusBar.setStyle({ style: StatusBarStyle.Light });
      SplashScreen.hide();
    });

[chriswep]

i'm observing similar behaviour on iOS. something briefly shows the statusbar during the splash screen and only after i hide it, the Statusbar is set according to my settings. I have set the appropriate values in Info.plist as well as via the Plugin interface.

[dessant]

I see the same black flash in both the status and navigation bar on Android when the app finishes loading, has anyone found a workaround?

[MarkChrisLevy]

@chriswep If your issue was on iOS13 (i guess it was), then I fixed it in #2098. Give it a try.

[JeongSeho]

On some Android devices, the default color of the navigation bar is not black. It's a device difference, but Android lets you specify the color of the navigation bar. The status bar is also the same. However. I've applied a style, but Android still shows a black status bar and a black navigation bar when splash is displayed.

[jcesarmobile]

wops, linked PR was wrong and doesn't fix this issue, reopening

[MarkChrisLevy]

@jcesarmobile my bad, sorry...

[Protectator]

It's still happening for me, and I can't find any way around it. Does anyone have a workaround, however ugly it is ?

[sbannigan]

Just opened a PR to fix this: #2603

[Nuajan]

Hello there.
I realise this thread is closed and the PR merged, but... is it really solved?
I'm still facing this issue ....
What about you, guys? @sbannigan? @jcesarmobile?

Regards!

[1antares1]

Same here :/ And in Cordova there is a pull request but abandoned by the developer.

[clemdesign]

For anyone facing to this problem and look for solution, here mine (with help of native developer).

For context, I faced to this problem only for Pixel 4 (or device with no standard status bar).

In styles.xml, I added in <style name="AppTheme":

        <item name="android:statusBarColor">@android:color/white</item>

For style AppTheme.NoActionBar, I use Theme.AppCompat parent.

In AndroidManifest.xml, for activity, I use @style/AppTheme.NoActionBarLaunch theme.

The app start with Splashscreen is now better and more immersive.

[josuelmm]

Any update?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.