question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Splash Screen Messing Status Bar Color/Style

See original GitHub issue

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();
    });

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:12
  • Comments:13 (4 by maintainers)

github_iconTop GitHub Comments

12reactions
Nuajancommented, May 28, 2020

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!

4reactions
Protectatorcommented, Feb 16, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unable to change the StatusBar when at the splashscreen ...
The end goal is the set the statusbar color and icon colors accordingly based on the device being set to light or dark...
Read more >
react native splash screen status bar color
Change color of statusBar in splashScreen react-native android ... Make sure in your styles.xml SplashTheme is having android:background item as such:.
Read more >
How to Create Splash Screen Without an Extra Activity in ...
Go to res -> values -> themes.xml add a new style and name it “splashScreenTheme“. This will hold the information that we want...
Read more >
expo/configure-splash-screen - npm package
--status-bar-background-color <color> - (only for Android platform) Customizes the background color of the status bar. Accepts a valid color (see 'background- ...
Read more >
Configure status bar, splash screen and app icon
Currently, the style value is auto . It means that the status bar will automatically pick the text color based on the app's...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found