25

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.

Per Quested Aronsson
  • 11,380
  • 8
  • 54
  • 76
  • 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). – Per Quested Aronsson Feb 04 '14 at 08:45
  • Take a look below: http://stackoverflow.com/questions/19209781/ios-7-status-bar-with-phonegap/23105459#23105459 – xdemocle Apr 16 '14 at 09:57
  • Take a look below: http://stackoverflow.com/questions/19209781/ios-7-status-bar-with-phonegap/23105459#23105459 – xdemocle Apr 16 '14 at 09:59

9 Answers9

16

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>
Minifyre
  • 510
  • 2
  • 5
  • 17
  • 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. – Minifyre Feb 04 '14 at 17:04
  • 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) – John Apr 09 '14 at 17:07
  • This also worked for me. Tested in iOS 7.1.1 with Phonegap 3.4.0. – Carlos Garcia Apr 30 '14 at 15:09
  • The statusbar was removed, but it still leaves a 20px gap on the top. – Matt Oct 08 '14 at 16:25
  • 2
    @John and others, note that you may also need to add: ` ` 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. – DuncanMack Nov 07 '14 at 19:45
  • This is nice, as it allows to centralise custom confs, but seams to works [on build.phonegap.com only](http://community.phonegap.com/nitobi/topics/gap_config_file_works_only_on_build_phonegap_com)... – Fafaman Feb 16 '15 at 10:24
  • This answer plus the comment from @DuncanMack worked for me to remove the iOS status bar using Cordova 6.3.1. – Jeff G Feb 16 '19 at 22:45
14

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

MPaulo
  • 1,491
  • 14
  • 19
  • I tried that plugin, with negative result. See the last paragraph in this question: http://stackoverflow.com/q/20716753/1158376. – Per Quested Aronsson Jan 13 '14 at 17:46
  • This plugin worked for me : https://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 – kris Jun 08 '15 at 03:59
14

Add this function into MainViewController.m file:

//fix not hide status on ios7
- (BOOL)prefersStatusBarHidden
{
    return YES;
}
myaug
  • 197
  • 2
  • 12
6

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.

mrMaF
  • 61
  • 1
  • 2
4

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" />
pppontusw
  • 454
  • 3
  • 6
3

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();
Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
Dima
  • 1,045
  • 14
  • 23
3

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()
occasl
  • 5,303
  • 5
  • 56
  • 81
1

This worked for me:

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

I'm working on Android.

Rico
  • 58,485
  • 12
  • 111
  • 141
Juan Camilo Guarin P
  • 183
  • 1
  • 2
  • 12
0

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']);
    };
Community
  • 1
  • 1
allwynmasc
  • 393
  • 5
  • 18