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 d

Answer 1

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. Save.

5. Launch the simulator.

Answer 2

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 3

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 4

Please check Following

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

It worked for me.

Answer 5

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.