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

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 2

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

Answer 3

if you use phonegap build, you can call

StatusBar.styleLightContent();

https://github.com/phonegap-build/StatusBarPlugin

Answer 4

Take a look at the link below, hope this could help you.

http://devgirl.org/2014/07/31/phonegap-developers-guid/

Answer 5

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 6

Add this one

function onDeviceReady() {
  if (parseFloat(window.device.version) === 7.0) {
      document.body.style.marginTop = "20px";
   }
 }

document.addEventListener('deviceready', onDeviceReady, false);

The Status Bar Issue in iOS7

http://coenraets.org/blog/2013/09/phonegap-and-cordova-with-ios-7/

Answer 7

I figured a more up to date answer may help someone here, this works in cordova 3.7+ and iOS 8.x and negates the need for the extra plugin.

In your project's plist file make sure that "Status bar is initially hidden" and "View controller-based status bar appearance" are both set to "NO"

Then, in MainViewController.m, inside - (void)viewDidLoad add:

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:YES];

or

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleDefault animated:YES];

for white or black text in your status bar.

Alternatively to hide completely, set both plist attributes above to YES, which appears to work for hiding it.