In 2.0.0-beta.11 (and most likely a few versions earlier), if you want to have the native status bar show at the top of the app and not have it overlap your <ion-header>, you need to bootstrap the application with the statusbarPadding config property (third argument of ionicBootstrap is an Object that contains all config settings) set to true.
When statusbarPadding = true, Ionic adds the class statusbar-padding to all <ion-header> elements.
app.ios.css defines a style such that all <ion-page> directives with a header child <ion-header class="statusbar-padding"> get 20px padding. This is all good, except that if any of the Components you push to the Nav stack have a custom selector defined, the CSS rule won’t apply because the <ion-page> markup won’t be present in the HTML (because you are using a custom selector). It is likely there is a simple fix for this but for now I have stopped setting the selector property on any “page” that gets revealed by Ionics main Nav component.