PhoneGap: Don’t overwrite the iOS Status Bar

If you’ve created a PhoneGap version of your project, the top of your screen might look like this on iOS:

See how the title of the screen (“Volt”) is crowded into the status bar?

It’s easy to fix this. Add the following lines into configxml in Project Properties (PhoneGap section):

<plugin name="cordova-plugin-statusbar" source="npm" />
  <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="StatusBarStyle" value="lightcontent" />

Your app will now look like this:

With the StatusBar plugin installed, you have a bunch of additional options for managing the status bar. See the full documentation here.