Ion-header overlaps with status bar on ios

Ionic Framework ionic-v3
1

Hello everyone!
I am having trouble with ion-header. After changing it’s color to dark it overlaps with status bar on iOS.

To show the problem I have created new blank application and set color of header to dark.

<ion-navbar color="dark">

And this is what I got
image

As well I am not sure that StatusBar plugin is properly working. Code below does not change anything in the app.

this.statusBar.overlaysWebView(false);
this.statusBar.backgroundColorByHexString('#ff0000');

Cordova CLI : 7.0.1
Ionic CLI : 3.1.2
cordova-plugin-statusbar: 2.2.2

1 Like
2

Up.
Is there a solution to this?

3

Exact same issue here.

Cordova CLI : 7.0.1
Ionic: 3.7.0

4

same issue
Cordova CLI : 7.0.1
Ionic: 3.7.0
"cordova-plugin-statusbar": “^2.2.3”,

5

This worked for me
Install statusbar plugin from cordova:
cordova plugin add cordova-plugin-statusbar

Add this line in the config.xml file:
<preference name="StatusBarOverlaysWebView" value="true" />

Don’t forget to rebuild ios:
ionic cordova build ios

Should work in simulator and iPhone

cli packages: (somepath)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2
Node       : v8.11.1
npm        : 5.8.0
OS         : macOS High Sierra
Xcode      : Xcode 9.3 Build version 9E145