How to remove iOS status bar with Phonegap Build?

Question

Is it possible to get rid of the status bar in iOS7 when using Phonegap Build 3.1? I can remove the status bar when building locally in Xcode, but as soon as I try Phonegap Build, it's back again.

1. Is there a config preference to remove the status bar completely?
2. If not, is it possible to overlay the status bar on top of the app view and set it to a transparent background?

I do not want the status bar to push down the app view 20px, which is the case now.

Answer 1

As of Phonegap 3 you can now customize plist files via config.xml.

Code:

<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true">
    <false/>
</gap:config-file>

Answer 2

Usually, you would edit the info.plist and add this key:

 <key>UIViewControllerBasedStatusBarAppearance</key><false/>

But as you can't do this on build, you'll have to add a plugin:

https://github.com/phonegap-build/StatusBarPlugin/blob/master/README.md

And then:

StatusBar.hide();

Answer 3

Add this function into MainViewController.m file:

//fix not hide status on ios7
- (BOOL)prefersStatusBarHidden
{
    return YES;
}

Answer 4

click on the "projectname-Info.plist" file under the XCode root project folder , you will be shown with an UI where you can see key vs values entries ,you can add/delete keys, add a new key just look for "Status bar is initially hidden" and set "YES" as the value.

Answer 5

I'm using the following in config.xml which completely removes the status bar, tested on iOS 7.0.3 & 7.0.4, Phonegap version 3.0.0 if that helps.

    <preference name="fullscreen" value="true" />

Answer 6

Simply install the status bar plugin (I'm using Cordova 5.x):

cordova plugin add [email protected]

The in your code just reference its global variable and use .hide():

StatusBar.hide()

Answer 7

With Cordova, I had to do actually 2 things.

1. When I build with XCode I set in Target->Statusbar style to -> HIDDEN this would hide statusbar at startup on your splash screen.

2. You have to hide it also on device ready with plugin. Otherwise, it will reappear. To do that, install plugin:

cordova plugin add org.apache.cordova.statusbar

and call this on deviceready:

StatusBar.hide();

Answer 8

This worked for me:

<preference name="fullscreen" value="true" />

I'm working on Android.

Answer 9

I've answered this for removing the Status bar altogether in your previous question

The essential part:

I got this to work beautifully in Cordova 3.6 + iOS 7.1. And considering that iOS 7 and 8 each have 50% of market share this solution should be enough.

Plugin I'm using: org.apache.cordova.statusbar

Instead of using StatusBar.hide() I used:

var hideSb = function(){
//        StatusBar.hide;
        cordova.exec(null, null, 'StatusBar', 'hide', ['Ehi', 'You']);
    };