Using the Cordova StatusBar plugin to fix overlap

When you start the application for the first time on an iOS device, you will realize that there is some issue with the status bar when the application is running. Here is how the status bar looks on my device:

You can see that the text in the status bar is white, and only the battery indicator is green. Also, you can see that the status bar overlaps our title bar. This is due to the iOS 7 change for ViewControllers (containing WebView running our PhoneGap application) to display full screen by default with a transparent status bar overlaying them rather than having their own designated space in the top 20 pixels of the screen as you saw earlier. There are two possible solutions:

• Provide CSS adjustments to the title bar; add some margin at the top and make its background dark

• Use the Cordova status bar plugin to do it natively

I prefer to use the second approach, because the first one looks more like cheating than a good solution.

To install the...