CODEWITHSUNDEEP
ionic-frameworkionic3
Sachin Km
Sachin Km

Reputation: 79

Status bar not working in ionic 3

I am newbie in IONIC 3, I just want to implement status bar to my app. I tried following methods.

import { App, Nav, Platform, Events, AlertController  } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';

constructor(public events: Events, public platform: Platform,   publicstatusBar: StatusBar) {

this.statusBar.overlaysWebView(true);
this.statusBar.backgroundColorByHexString('#1972d2');
this.statusBar.isVisible;

}

and Changed in index.html page as solution mentioned in this link 

<meta name="theme-color" content="#1976d2">

and also mentioned in config.xml page like this

<preference name="StatusBarBackgroundColor" value="#1972d2" />
<preference name="StatusBarOverlaysWebView" value="true" />

What might be the issue? Please help me.

Upvotes: 2

Views: 3754

Answers (1)

reuseman
reuseman

Reputation: 333

Everything you did is correct.

There are 2 possible solutions:

  • the plugin StatusBar is not installed. Even if in an empty project in the app.component.ts is mentioned, is not installed properly. So you have just to follow this guide on the official documentation.
  • your android device does not support that feature. For example, there are different custom ROMs that manage the status bar in an unconventional way like MIUI, EMUI, etc. You can check that on this page that collects issues of the Cordova plugin.

Anyway, if you do everything listed above it should work but remember to make a build to be sure at 100%

EDIT: I've tested it on the MIUI and it works like a charm though, but on the issue page someone got a problem on some device. Maybe it's some particular version.

Upvotes: 3

Related Questions