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.

Nyctophobia

The way I solved it eventually was to build the app locally in Xcode, instead of using Phonegap Build. I was able to configure this in info.plist (or whatever it is called). – Nyctophobia

Take a look below: #19210281 – Strasser

Take a look below: #19210281 – Strasser

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>

Gamy

Weird it worked for my app that I submitted yesterday, did you also have the fullscreen preference (see pppontusw's answer)? I left it in my config file, I wonder if that had something to do with it. – Gamy

No combination of this and fullscreen would work for me. I changed the plist and built in xcode and that is the only way I could get it to work (PG 3.3) – Relevance

This also worked for me. Tested in iOS 7.1.1 with Phonegap 3.4.0. – Topminnow

The statusbar was removed, but it still leaves a 20px gap on the top. – Jugular

@Relevance and others, note that you may also need to add: <gap:config-file platform="ios" parent="UIStatusBarHidden" overwrite="true"> <true/> </gap:config-file> This comes from the PhoneGap documentation on the "fullscreen" preference: Note: may not be supported by newer versions of iOS, but users can use the config-file element on phonegap build, and set UIViewControllerBasedStatusBarAppearance to false and UIStatusBarHidden to true. This is working correctly as of PhoneGap 3.6.3. – Repetitive

This is nice, as it allows to centralise custom confs, but seams to works on build.phonegap.com only... – Dished

This answer plus the comment from @Repetitive worked for me to remove the iOS status bar using Cordova 6.3.1. – Monumentalize

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();

Hesky

I tried that plugin, with negative result. See the last paragraph in this question: https://mcmap.net/q/538184/-how-can-i-get-the-ios-status-bar-to-overlay-the-app-surface-rather-than-pushing-it-down/1158376. – Nyctophobia

This plugin worked for me : github.com/apache/cordova-plugin-statusbar (NB: this is for Cordova, not PhoneGap build) However I still had a really thin mini status bar above my app - to remove that I needed to tick "Hide Status Bar" in Xcode > Targets > General > Deployment Info – Jagged

Answer 3

Add this function into MainViewController.m file:

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

Ramulose

This is the only thing that worked for me, iPad 2 Simulator, iOS 8.3, phonegap 3.5.0-0.20.5 – Abeokuta

this should be the answer! best solution out there. – Bankroll

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.

Sterrett

I've found you also need to set View controller-based status bar appearance to NO. – Wreckage

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

Doorway

I see, sorry I can't help much then. Maybe try using 3.0 if your don't require 3.1? – Doorway

is it possible to hide for a webview in landscape only? – Paramedic

Is it in the root config.xml? – Matriarch

Answer 6

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();

Defector

Answer 7

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

Tristich

Answer 8

This worked for me:

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

I'm working on Android.

Shuffleboard

In what config.xml? in the one in root ? – Matriarch

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

Glori

This should be a comment. – Boo