CODEWITHSUNDEEP
cordovaionic-frameworkcordova-pluginsionic3
Joe Scotto
Joe Scotto

Reputation: 10867

Ionic iPhone X statusbar white bar with updated statusbar plugin

I've been trying for a while now to get rid of this white bar on the top of my app when running on iPhone X. I've read in many places that updating from v2.2.0 of the cordova-plugin-statusbar to v2.3.0+ would get rid of this. After updating nothing changed, the white bar is still there.

What can I do to get rid of this? I don't know what else I can try.

Any help would be great, thanks!

enter image description here

Upvotes: 0

Views: 1541

Answers (1)

99tharun
99tharun

Reputation: 1216

First update the viewport meta tag in your index.html to add the viewport-fit=cover field.

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

In your app.component.ts change the color of the statusbar.

import { StatusBar } from "@ionic-native/status-bar";

export class MyApp {

  constructor(private statusBar: StatusBar) {
    platform.ready().then(() => {
      statusBar.overlaysWebView(false);
      statusBar.backgroundColorByHexString('#000');
      statusBar.styleBlackOpaque();
    }
  });
}

Or you can completely hide it with statusBar.hide();

Find more info here

Upvotes: 1

Related Questions