Status Bar on iOS Background Color

Question

I’m having a hard time setting the iOS status bar background color to transparent. I’m using the latest version of cordova statusbar and ionic, and leaving everything to their default setting, however i’m getting a white background color for some reason. How can i set the background color to transplant, i though this is the default value anyhow.

Answer 1

Okay so after referring to:

• https://issues.apache.org/jira/browse/CB-12886 and
• https://issues.apache.org/jira/browse/CB-12890

The issue occurs in iOS 11, and cordova-ios-4.5.0 and is simply solved by adding the cover value to viewport-fit as follows in your index.html:

   <meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />

Answer 2

As maintained by luckystarr. Plugin cordova-plugin-statusbar will help you achieve what you want to do.

After adding plugin add following preference in config.xml to get black background

<preference name="StatusBarBackgroundColor" value="#000000" />

To change the color of icons and text in status bar you can use

<preference name="StatusBarStyle" value="lightcontent" />

Available values are default, lightcontent, blacktranslucent, blackopaque.

Answer 3

This worked for me:

1. Run cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

2. config.xml Add <preference name="StatusBarBackgroundColor" value="#" /> inside <platform name='ios'> tag

3. index.html Add <meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />

4. Run cordova build ios

5. Launch the simulator.

Answer 4

If you are using statusbar plugin, you should also update it to latest version (2.3.0 has just been released). This new version of the plugin handles the iPhone X notch.

BTW, the problem has nothing to do with the cordova-ios version, it's a new "feature" of the WebView when you compile the apps with iOS 11 SDK (it won't appear if you use Xcode 8 as it uses SDK 10). viewport-fit=cover is the way to go for removing this fake statusbar.

Answer 5

Please check Following

window.cordova.plugins.StatusBar.overlaysWebView(false);

It worked for me.