Search code examples
iosionic-frameworkionic2statusbarionic-view

How to hide bar behind status bar in Ionic app?

I am attempting to remove the opaque bar between the status bar and my app's content using the cordova-plugin-statusbar for Ionic. This does not seem to be part of the status bar because it is visible even when the status bar is not.

I believe this issue may have something to do with the lack of an <ion-header> element but I am note sure. Furthermore, I have not had this issue in my other non-Ionic Cordova projects.

Here is my $ ionic info:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.3.2 Build version 8E2002

I have tried the following status bar configurations:

Default

this.statusBar.styleDefault();

statusBar.styleDefault()

Hidden

this.statusBar.hide();

statusBar.hide()

Light Content

this.statusBar.styleLightContent();

statusBar.styleLightContent()

Light Content & No Overlay

this.statusBar.overlaysWebView(false);
this.statusBar.styleLightContent();

statusBar.styleLightContent() & statusBar.overlaysWebView(false)

Solution

  • This seems to be a known issue with the Ionic View app on iOS. The preview app adds a translucent 20px tall element that cannot be removed with the Status Bar plugin or CSS.

    Documented in the Ionic View app's Github issues and the Ionic forum.