Ionic ion-view header behind ios status bar

Question

How do I avoid ionic header from getting behind ios status bar like this?

I created the header with following code:

Answer 1

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:

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

Hope this helps.