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:
Screen Shot 2016-04-26 at 11.36.57 AM

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:
Screen Shot 2016-04-26 at 11.36.37 AM

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

This entry was posted in PhoneGap, tips. Bookmark the permalink.