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 found a better option to do this. In AppModule.ts make change to IonicModule.forRoot(MyApp, {statusbarPadding: true}), and from app.component.ts remove or comment statusBar.overlaysWebView(true); it will fix your problem for IOS.