Cordova HiddenStatusbarOverlay Plugin

Beginning with iOS 7 view controllers are displayed full screen, by default, as shown in Figure 1. This means they will cover the entire screen including the area underneath the status bar.

Plugin's Purpose

The purpose of the Cordova plugin is to prevent the status bar from covering the view controller in iOS 7.

Installation

The plugin can either be installed into the local development environment or cloud based through PhoneGap Build.

Adding the Plugin to your project

Through the Command-line Interface:

# ~~ from master ~~
cordova plugin add https://github.com/katzer/cordova-plugin-hidden-statusbar-overlay && cordova prepare

or to use the last stable version:

# ~~ stable version ~~
cordova plugin add de.appplant.cordova.plugin.hidden-statusbar-overlay && cordova prepare

Removing the Plugin from your project

Through the Command-line Interface:

cordova plugin rm de.appplant.cordova.plugin.hidden-statusbar-overlay

PhoneGap Build

Add the following xml to your config.xml to always use the latest version of this plugin:

<gap:plugin name="de.appplant.cordova.plugin.hidden-statusbar-overlay" />

or to use an specific version:

<gap:plugin name="de.appplant.cordova.plugin.hidden-statusbar-overlay" version="1.1.0" />

More informations can be found here.

Using the plugin

After installation, the statusbar and the overlay will be hidden now. The visibility of the status bar can be changed manually too.

Hide the status bar

The overlay may appear again after some situations. In that case the overlay can be fadded out through the statusbarOverlay.hide interface.

window.plugin.statusbarOverlay.hide();

Show the status bar

To revert the changes, the status bar can become visible again through the statusbarOverlay.show interface.

window.plugin.statusbarOverlay.show();

Determine the status bar visibility

To determine if the status bar is hidden, the statusbarOverlay.isHidden interface can be used.
The method takes a callback function as its arguments which will be called with the result.

window.plugin.statusbarOverlay.isVisible( function (isVisible) {
	// console.log('status bar is visible') if isVisible;
});

Note for other platforms

Cordova has the ability to hide and show the statusbar for each platform. Simply add the following snippet to the plugin.xml:

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

It only does not hide the overlay on iOS 7 and above.

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

License

This software is released under the Apache 2.0 License.

© 2013-2014 appPlant UG, Inc. All rights reserved