Ionic ion-view header behind ios status bar

I have been stuck on the same problem for a long time and none of the above solutions worked for me. Finally, to get the status bar from overlapping on the app's view, I added the following preference to my config.xml file and viola:

  <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="StatusBarStyle" value="lightcontent" />

This ofcourse requires the plugin: cordova-plugin-statusbar "StatusBar".

Hope this helps.

The solution with StatusBar.styleDefault(); did not work for me, but calling StatusBar.overlaysWebView(false) did the job.

First screenshot is UI of the app before calling StatusBar.overlaysWebView(false), you can see that the iOS status bar is over the app and user cannot click the whole area of menu button:

Now when I call StatusBar.overlaysWebView(false), the iOS status bar is no longer over the menu button:

From: http://www.sitepoint.com/5-ionic-app-development-tips-tricks/

Ionic has specific classes to deal with this – platform-ios and platform-cordova. Ionic’s pre-built elements target those classes and add in 20px top margin to the buttons in your header to make up for these situations. To get my own custom elements to do the same, I follow the same pattern. For my .search-bar above, I add a margin if we’ve got a .platform-ios.platform-cordova:not(.fullscreen) body class. Example:

.platform-ios.platform-cordova:not(.fullscreen) .search-bar {
     margin-top: 20px;
}

This should be the correct answer.