Status Bar Plugin

Description

Control the status bar appearance and behavior.

Discussion

The Status Bar plugin can be used to control the appearance and behavior of the status bar on iOS devices.

See NPM: cordova-plugin-statusbar for full documentation.

Status Bar Plugin - iOS 7 Styling 

The Status Bar Plugin default behavior follows the styling recommended by Apple for iOS 7 and greater apps. By default, the iOS status bar is overlaid on top of the PhoneGap WebView. This will requires the addition of a 20px spacer to a Panel header to accommodate the status bar. If you would like to set the behavior to the previous iOS 6 style, which does not overlay the WebView, you must set the properties for the status bar from within the onPhoneGapReady event in the UX Component's Client-side events.

For example:

StatusBar.overlaysWebView(false);
StatusBar.styleDefault();
While the PhoneGap documentation for the Status Bar plugin indicates that a preference setting within the config.xml file can be used to set the default behavior as required, this is not currently supported by PhoneGap Build.

The PhoneGap StatusBar plugin resizes the size of the WebView control asynchronously. That means that if your UX component uses Panels (which is very likely) the Panels will have been laid out using the original size of the WebView control. This will cause layout errors - most likely manifested as Panel Footers being incorrectly sized. Therefore, it is very important that you add this code to the onPhoneGapReady event to resize the Panels in your component. This code must be wrapped in a setTimeout() so that it runs after the Statusbar plugin has completed.

For example:

StatusBar.overlaysWebView(false);
StatusBar.styleDefault();

setTimeout(function() {
    var obj = {dialog.object}.getPanelObject();
    obj.resize();
},100);

Limitations

Android, iOS