Ionic 2 - navbar is overlapping status bar in ios

i built the ionic 2 conference app sample …(latest with ionic 2.alpha42) and added iOS platform. while building it, the CLI showed that it installed “cordova-plugin-statusbar” for ios. but when i run it on an iphone the navbar and status bar are overlapping. how do i fix it?
p.s. this problem did not exist when i used previous version - ionic2.alpha38

This is fixed in the latest release alpha.44

oh thanks, how do i update it? im using alpha.42.

I temporarily fixed this by adding following line to www/app/app.ios.scss:
@import “…/…/node_modules/ionic-framework/platform/cordova-ios”;

Yes, that import was missing from the Ionic source, but it has been fixed in the latest release (2.0.0-alpha.44):

@teknofreek: You can update by changing the version of ionic-framework in your package.json file:

"ionic-framework": "2.0.0-alpha.42",


"ionic-framework": "2.0.0-alpha.44",

and then you can run npm install from a terminal from the root of your project.

There are also some other ways, see:

1 Like

i got a warning

WARN EPEERINVALID ionic-framework@2.0.0-alpha.44 requires a peer of angular2@2.0.0-beta.0 but none was installed.

this is not a good idea… there are a slew of dependencies that then cause issues when updating to the latest version of angularjs

Yeah, you’re right. Since we introduced Angular as a peer dependency the best way to update is:

npm install ionic-framework@latest --save

cc @teknofreek

1 Like