Android status bar no icon shown

Ionic Framework ionic-v3
1

When I update my project ionic version, the android app have status bar can’t show any icon when enter to the app:07 PM
When enter to app:57 PM
Anyone know how to solve? My info:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.17.0
ionic (Ionic CLI) : 3.17.0
global packages:

cordova (Cordova CLI) : 7.1.0 
local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.3.0 ios 4.6.0-nightly.2017.11.22.24bfb734
Ionic Framework    : ionic-angular 3.8.0
System:

ios-deploy : 1.9.2 
ios-sim    : 5.0.13 
Node       : v7.10.0
npm        : 5.5.1 
OS         : macOS Sierra
Xcode      : Xcode 9.0.1 Build version 9A1004 
Environment Variables:

ANDROID_HOME : not set
Misc:

backend : legacy
1 Like
2

Same probleme here:

  • When built in --dev mode, status bar is OK (background-color is black, icons color is white)

  • When built in --prod mode, status bar is KO (entire status bar is black)

cli packages: (/usr/lib/node_modules)
    @ionic/cli-utils  : 1.16.0
    ionic (Ionic CLI) : 3.16.0
global packages:
    cordova (Cordova CLI) : 7.1.0
local packages:
    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.7.1
System:
    Node : v8.9.1
    npm  : 5.5.1
    OS   : Linux 4.4
Environment Variables:
    ANDROID_HOME : /opt/opt/android-sdk-linux/
Misc:
    backend : pro
3

Hello,

Same problem here, black status bar, with :

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v7.8.0
    npm               : 4.2.0 
    OS                : Linux 4.8

Misc:

    backend : pro
1 Like
4

Same here. Just upgraded my CLI from 1 to 3. It is an Ionic1 App.

5

Hello,
same problem with:
cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 
Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

Cordova Platforms : android 6.3.0 ios 4.5.4
Ionic Framework   : ionic1 1.3.4

System:

Android SDK Tools : 26.0.2
ios-deploy        : 1.9.0 
ios-sim           : 6.1.2 
Node              : v6.10.0
npm               : 2.15.12 
OS                : macOS High Sierra
Xcode             : Xcode 9.2 Build version 9C40b

Misc:

backend : legacy

Anyone know how to solve?

6

I have the same issue, and I solved.
I changed statusBar.styleDefault() to statusBar.styleLightContent() at app.component.ts

Good luck!

26 Likes
7

I found this helpful. You can use one of these three options in ionic 3

if(this.platform.is('android')) {
  this.statusBar.backgroundColorByHexString('#fff');
}

or

if(this.platform.is('android')) {
  this.statusBar.styleBlackOpaque();
}

or

if(this.platform.is('android')) {
  this.statusBar.styleLightContent();
}
19 Likes
8

thanks this worked for me

9

Thanks this.statusbar.styleLightContent(); is working for me

10

perfect solution for this issue

11

Thanks this.statusbar.styleLightContent(); is working for me

12

Thanks for the tip! It was great