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!

score 25 · Answer 1 · edited Feb 15 '17 at 06:39

25

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

edited Feb 15 '17 at 06:39

Pangolin

7,284
8
53
67

answered Jun 19 '14 at 18:23

rickdmer

1,147
12
12

1

This should be the recommended answer as easier to maintain. – sradforth Dec 19 '14 at 01:43
2

All the plugins got renamed, so this should be `cordova plugin add cordova-plugin-statusbar` now. – Joe Freeman Jun 03 '15 at 20:52
1

`blacktranslucent` didn't work for me, but `default` did and statusbar became black translucent – psycho brm Jul 18 '16 at 14:50

score 10 · Answer 2 · answered Nov 20 '13 at 06:26

10

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

answered Nov 20 '13 at 06:26

user3007104

219
1
2
6

3

Didn't work for me, sadly — statusbar is still transparent with black text – Tom McKenzie Nov 20 '13 at 06:54
Yes, solves the white status bar issue after doing this to show the status bar perfectly in iOS 7: http://stackoverflow.com/a/18886468/706751 – tylerl Feb 24 '14 at 21:25
3

I've actually had to change a setting in the MainViewController.xib file using Xcode - the 4th tabicon over (the one that looks like a slider, to the right of the ruler) has options like Size, Orientation, Status Bar, Top Bar, etc. - down below those, right above the Tint color option, is Background -- Change it to black! :) – tylerl Feb 24 '14 at 21:59

score 2 · Answer 3 · answered Mar 10 '14 at 21:30

2

if you use phonegap build, you can call

StatusBar.styleLightContent();

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

answered Mar 10 '14 at 21:30

score 1 · Answer 4 · answered Mar 24 '15 at 11:28

1

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

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

answered Mar 24 '15 at 11:28

Gilana

111
12

Chrome says this site contains malware – Roel Feb 08 '17 at 10:18

score 1 · Answer 5 · answered Apr 03 '18 at 04:46

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

answered Apr 03 '18 at 04:46

Malaka Gunawardhana

285
4
19

score 0 · Answer 6 · answered Nov 19 '13 at 12:36

0

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/

answered Nov 19 '13 at 12:36

Ved

2,701
2
22
30

1

Thank you, but that's not what I want to achieve. I want the top bar to be: 1. **translucent**, so the top bar will be 'same color' as anything beneath it; 2. **with white font**... I have both when I run my app in Safari... But when I run it within PhoneGap, the top bar's font color is **black**. How to make it **white**? – user3007104 Nov 20 '13 at 05:57
Try this may be help 1)http://alexvanderzon.com/metatags/ (2)http://maximilianhoffmann.com/article/building-ios-web-apps/ (3)http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review – Ved Nov 20 '13 at 06:35

score 0 · Answer 7 · answered Jul 25 '15 at 13:17

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.

White status bar in iOS Phonegap?

7 Answers7

The Status Bar Issue in iOS7