We've couple of Android and IOS apps which was made using Cordova. After upgrading our cordova-ios and cordova-android versions we were facing some issues with native status-bar.

The status-bar content and page content were getting mixed up, making user unable to perform any operations provided in the header.

enter image description here

While looking for solution we found cordova plugin cordova-plugin-statusbar which provides some functions to customize the iOS and Android StatusBar. To use this plugin we need to add some lines to our config.xml file in cordova folder.

First we need to add permission for cordova-plugin-statusbar to make changes to the status-bar. For that we need to add

<feature name="StatusBar">
  <param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>

Depending on what changes you need to make to status-bar you can use different functions, for example

To make the statusbar overlay or not overlay the WebView at startup add,

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

To set the background color of the statusbar by a hex string (#RRGGBB) at startup. If this value is not set, the background color will be transparent,

<preference name="StatusBarBackgroundColor" value="#000000" />

To set the status bar style,

<preference name="StatusBarStyle" value="lightcontent" />

This plugin also provides functionality to hide status-bar for gaming applications.

However, still after adding all these, the changes were not reflected and page content and status-bar were still getting mixed up. On further debugging we found that something in our application was overriding the changes we made for status-bar. So we decided to make changes manually using the same plugin cordova-plugin-statusbar.

cordova-plugin-statusbar provides StatusBar global object which you can catch and use to make changes to the status-bar, so we added a little script in our index.html file which overrides the config.xml settings.

<script type="text/javascript">
  document.addEventListener("deviceready", onDeviceReady, false);

  function onDeviceReady(){
    StatusBar.overlaysWebView(false);
    StatusBar.backgroundColorByName("black");
    StatusBar.styleLightContent();
  }
</script>

The reason to add changes after deviceReady event is StatusBar object is not available until after the deviceready event.

After adding changes in index.html file the issue was solved and status-bar and page-content were separated.

enter image description here

So one reason I wanted to share this was it can save somebody's time as we spent a good amount of time looking for solutions and following different approaches.

References:
cordova plugin statusbar,
phonegap developers guide