Black Status Bar with Ionic Cordova Run

Ionic Framework ionic-v3
1

The status bar is completely black (showing no notifications, no time, no WiFi indicators, etc.) whenever I deploy my Ionic application to my Android device. The command I’m using is ionic cordova run android --device. If I use --livereload the status bar appears like normal, but I can’t use the app then unless I am plugged into my computer. I have all of my ionic and cordova dependencies updated globally and in my project, and this appears to happen in the first couple commits of my project so I don’t think I did anything to change this behavior. Does anyone know why this is happening, or is this expected behavior?

Thanks in advance.

2

Do you get the same behaviour with a new project started with ionic start?
What is your ionic info output?

3

I created a new project and it seems like the status bar works fine on there. Here’s the ionic info output for the project I’m having issues with.

cli packages: (/home/devin/code/ionic/CryptoProfitLog/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.5
    Cordova Platforms  : android 7.0.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.12.3
    npm               : 5.6.0 
    OS                : Linux 4.13

Environment Variables:

    ANDROID_HOME : /home/devin/Android/Sdk

Misc:

    backend : pro

One thing that I noticed that was interesting was that path the the CLI packages went to the projects node_modules directory, while the new project I started goes to /usr/lib/node_modules.

4

Compare the package.json file of the two projects.

5

By removing the ionic devDependency from my package.json I was able to get the CLI packages to point at /usr/lib/node_nodules but that doesn’t seem to have fixed my issue. I don’t really see a difference in my package.json at all to be honest.

6

Then this is not the culprit - tbh it would have surprised me.
Now check the code - or copy over your content over to the new app and see if this breaks things there as well. If yes, do it step by step until you find the trigger.

7

I finally figured out what it was. I had to delete cordova-plugin-statusbar from my config.xml and package.json and also delete all generated files. Now everything seems to be working fine though.

1 Like
8

for me worked this one on ionic 4
Just write “this.statusBar.styleBlackTranslucent();” instead of “this.statusBar.styleDefault();”
in app.component.ts

cheers

7 Likes
9

According to the cordova doc:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/

StatusBar.styleLightContent();

Should be the solution.

2 Likes
10

Thank you @hrbolouri, it worked for me. I’m using Ionic 5 and Angular 10.