Hiding and showing the iOS status bar in Phonegap 2.5.0

After setting up a new Phonegap 2.5.0 project in Xcode, I noticed the IDE was warning of a deprecation in the Phonegap sample app:

‘useSplashScreen’ is deprecated. Deprecated in Cordova 2.5. Add/Remove the SplashScreen plugin instead of setting this property.

Phonegap 2.5.0 includes a change to the way the application splash screen is shown and hidden, and this property is no longer used. Instead, the CDVSplashScreen plugin handles this duty and exposes a couple of additional properties, such as auto hide, show spinner etc. These are declared in the project config.xml file.

It seems as though a reference to this property remains in the AppDelegate.m file, which causes the deprecation warning. The self.viewController.useSplashScreen = YES; line can be commented out.

The Jumping Splash Screen

After messing around with some of the splash screen options, I noticed that when launching the app using the iOS Emulator, the splash screen appeared to jump downward by about 20px before the app launched. This seemed to be caused by the iPhone status bar (the bar a the top displaying the network carrier and time etc).

Some fixes suggest you reduce the height of the splash screen image by 20px (40px for retina), however Xcode will then complain that the images aren’t the correct size for the target device.

Hiding the status bar whilst the splash screen is displayed

If you wish to hide the status bar whilst the splash screen is displayed, there’s no longer a need to crop 20px from the bottom of the splash screen image.

  1. In Xcode, simply click on your project (in the project folder pane)
  2. In the main window select your project target. This should display your app target summary.
  3. Halfway down, in the Status Bar section, check “Hide During Application Launch”

Deployment Info

(this option can also be controller in your app’s info.plist file.

Now when the app is built and launched, there should be no status bar whilst the splash screen is displayed. The 20x jump will no longer occur too! However, I found the status bar was is now hidden throughout the entire app.

Displaying the status bar after the splash screen has been hidden

At this point i’m not sure if this is a Phonegap issue, however the solution is nice and simple.

  1. In the project “Classes” folder, open MainViewController.m
  2. Find the webViewDidFinishLoad viewDidLoad method
  3. Insert [[UIApplication sharedApplication] setStatusBarHidden:NO]; before the method return.

This line will re-show the status bar once the Phonegap web view has loaded.

Advertisements

6 thoughts on “Hiding and showing the iOS status bar in Phonegap 2.5.0

  1. I’ve currently the same issue. Just tried it. When the app runs, the status bar will overlay the top 20px of the webView.

    • You’re one step ahead of me! I had the same problem. I googled the issue and most fixes suggested re-enabling the status bar at launch and cropping the launch image. However, I just tried moving the “[[UIApplication sharedApplication] setStatusBarHidden:NO];” to the viewDidLoad method. This is called a bit earlier in the view lifecycle so the view dimensions are calculated correctly.

      Thanks for pointing this out. I’ll update the post!

      I haven’t fully tested this with other orientations and web-views e.g. in app browser etc. Your mileage may vary!

  2. I don’t know why, but when I insert into viewDidLoad, the web view still has 20px white space on bottom, didFinishLoad works fine just has status bar on top.

  3. Hmm, i’m trying to HIDE the Status bar on launch now, however using the reverse of this doesn’t work. It wants to pop up no matter what I do after the splash screen finishes loading. Any ideas?

      • In a recent project using Cordova 3.0 either the top part of the UIWebView would appear below the status bar (in iOS 6) or the bottom part appeared below the bottom of the screen, causing the body of the page to become scrollable.

        Turned out this was caused because we recently had added ‘height=device-height’ to the ‘viewport’ meta tag (next to ‘width=device-width’). This is unnecessary and will trigger an error in Cordova (or in the UIWebView? anyway, the height of the status bar should not be included in the viewport height).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s