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

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

cordova plugin add cordova-plugin-statusbar@1.0.1

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

StatusBar.hide()

Answer 2

This worked for me:

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

I'm working on Android.

Answer 3

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']);
    };

Answer 4

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 5

Add this function into MainViewController.m file:

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

Answer 6

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" />