Cordova: Fix for iOS 7 status bar

Written by Sepp Wijnands on Sunday 27 October 2013 in mobile

Since the introduction of iOS 7.0 and the accompanying iOS7 SDK, the status bar behavior in iOS has changed. The status bar can now change color and/or be part of the application.

While sounding nice on the surface, it more or less spelled temporary doom for cordova and phonegap applications who would like to keep the old behavior.

Luckily with the new 3.1.0 release of cordova you can!

In the latest release there is a new status bar plugin, in which, among other things you can revert the status bar back to its pre iOS7 state.

The problem

In iOS7 without the new plugin, the status bar in a standard cordova application will be part of the application, as depicted in the picture below:

Cordova statusbar without plugin in iOS7

This on its own would not directly be a problem, and could be a rather nice feature, depending on your application. However, when you use a pulling down gesture movement, for example, the status bar becomes completely unreadable:

Cordova statusbar without plugin in iOS7, web view pulled down

The status bar disappears because the web view is being pulled down, leaving behind a black background, while the status bar text itself is also black.

There are some workarounds like changing your background color or pushing the top margin of the document body further down:


    document.body.style.marginTop = "20px";

However, even with these workarounds in place, it is very hard or even impossible to get the old status bar behavior back in full.

The solution

With the new 3.1.0 release you can revert the status bar behavior back to as it was in iOS 6.0.

Install the new status bar plugin:

    $ cordova plugin add org.apache.cordova.statusbar

After that, the only thing you have to do, is to call the following method somewhere in your deviceready event:

    StatusBar.overlaysWebView(false);

And you should be ready to go.

A full example

Starting from scratch, we start by creating a new cordova application (using the 3.1.0 release):

    $ cordova create CordovaStatusBarTest test.cordovastatusbar CordovaStatusBarTest

Then we add the iOS platform:

    $ cd CordovaStatusBarTest
    $ cordova platforms add ios

And install the necessary plugins:

    $ cordova plugin add org.apache.cordova.device
    $ cordova plugin add org.apache.cordova.statusbar

The device plugin is not really mandatory, but it allows you to check on which version/platform your application is running.

After installing the plugins we can add the overlaysWebView(false) call to enable the old iOS 6.0 behavior. This can be done by opening the www/js/index.js file, and searching for the function onDeviceReady (somewhere around line 35). It should look similar to:

    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },

An example implementation fixing the problem, could be:

    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        if (window.device.platform === 'iOS' && parseFloat(window.device.version) === 7.0)        
            StatusBar.overlaysWebView(false);
        app.receivedEvent('deviceready');
    },

This basically checks if we are running on an iOS 7.0 device, and then switches the overlay behavior of the status bar to off.

You are now ready to check your result:

    $ cordova emulate ios -d
    cordova library for "ios" already exists. No need to download. Continuing.
    Wrote out iOS Bundle Identifier to "test.cordovastatusbar"
    Wrote out iOS Bundle Version to "0.0.1"
    iOS Product Name has not changed (still "CordovaStatusBarTest")
    Calling plugman.prepare for platform "ios"
    Preparing ios project...
    Processing configuration changes for plugins.
    Iterating over installed plugins: [ 'org.apache.cordova.device', 'org.apache.cordova.statusbar' ]
    Writing out cordova_plugins.js...
    Ensuring plugin "org.apache.cordova.device" is installed correctly...
    Plugin "org.apache.cordova.device" is good to go.
    Ensuring plugin "org.apache.cordova.statusbar" is installed correctly...
    Plugin "org.apache.cordova.statusbar" is good to go.
    Running on emulator for platform "ios" via command ""/Users/sw/cordova/CordovaStatusBarTest/platforms/ios/cordova/run" --emulator" (output to follow)...

When trying out the application in the emulator, it should resemble something like this:

Cordova example application, with status bar plugin, utilizing old iOS 6.0 behavior

If you pull down the web view now, the status bar should still be readable and be in the same location. Problem solved!

comments powered by Disqus

Since 2006 our products and services have helped hundreds of people optimize their daily business: