White status bar in iOS Phonegap?

Question

how to make top status bar translucent with white text in Phonegap 3.1.0 for iOS7?

App looks fine in mobile Safari, but when I try to run it in Phonegap text at top bar is white only while app loading, after that it's black no matter what settings I set in project's config.

Right now have <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> in web page & 'Status Bar Style' = 'Black Translucent' in XCode... doesn't help.

Pls help!

Answer 1

May be too late, but someone else with the same question may resolve this by installing below plugin.

cordova plugin add cordova-plugin-disable-ios11-statusbar --save

Then build and run the app the issue will be solved

Answer 2

You can do this without any meta tags or editing anything in XCode.

First, install the statusbar plugin via CLI:

cordova plugin add cordova-plugin-statusbar

Then you can use these preferences to style the status bar (in config.xml):

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

This will give you a transparent bar in iOS 7 with white text. For other options check out http://plugins.cordova.io/#/package/org.apache.cordova.statusbar

Answer 3

finally, I found solution.

Make sure you have following: At your index.html have following meta tag:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

At Xcode, open [YourPrjectName].plist & add following lines:

"Status bar style" = "Transparent black style (alpha of 0.5)" AND
"View controller-based status bar appearance" = "NO"

Without second line in will not work (actually, that was the issue in my case).