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.
This worked for me:
Run cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
config.xml Add <preference name="StatusBarBackgroundColor" value="#" /> inside <platform name='ios'> tag
index.html Add <meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
Save.
Launch the simulator.
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.
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.
