Fullscreen PhoneGap app with XCode

Problem:

How can I get rid of the status bar on top of my PhoneGap application on my iOS device?

Solution:

There are several ways to do this, and although I won't go into all of the ones I found, one of the easiest ways to do this is to just edit your project's Info.plist file. This is generally named in the form of "YourAppName-Info.plist".

In your plist file, secondary-click and add a row. Name this row UIStatusBarHidden, and change its type to Boolean. Note that if a drop-down menu appears and gives you the option to select "Status bar is initially hidden", pick that. In both cases, set the value to YES.

The next screenshot is an example where the choice is given to initially hide the status bar:

The next time you run your PhoneGap application, you'll now notice that it is fullscreen. This will continue to be the case until your application code does anything to change this, (for instance, if you try to send the user to a different page).

Other thoughts:

This was tested with PhoneGap version 1.5.0 (codename Cordova) on iOS 5.1, using XCode 4.3.2. Your mileage might vary with different versions. Also note that these instructions can be used to initially hide the status bar in any iOS application, not necessarily just PhoneGap applications.