RC3: some StatusBar methods not working

I’m working on an app, currently in RC3 but the status bar on android is an ugly blue and the standard StatusBar methods don’t appear to work except for one.

I’ve made a test function:

changeStatusbar() {
    let num = this.randomIntFromInterval(1,6);

    switch(num) {
      case 1:
        StatusBar.styleBlackTranslucent();
      break;
      case 2:
        StatusBar.styleLightContent();
      break;
      case 3:
        StatusBar.styleBlackOpaque();
      break;
      case 4:
        StatusBar.backgroundColorByName('red');
      break;
      case 5:
        StatusBar.backgroundColorByName('black');
      break;
      case 6:
        StatusBar.backgroundColorByName('green');
      break;
    }

    alert(num);
 }

Clicking the button this function is hooked to the only ones that work are options 4,5,6
I can get by with this, now that I’ve figured out which methods are working for me, but something is definitely not right. Anyone else experiencing this, or any other ideas?

Hi beck24,

if you look inside the readme.md of the underlying cordova-plugin-statusbar, there is a list with these methods and the operating systems they work on.
the only methods that work for android are
backgroundColorByName()
backgroundColorByHexString(hexString)
hide()
show()
isVisible()

here is the link:

Ah, thanks! That makes sense now, so it’s working as intended.

Did it work out? I use backgroundColorByHexString but my bar is still blue…

it’s like an old timer bug which remains open…if you find something that would be awesome!

Well, I just need it to be black, so StatusBar.backgroundColorByName(‘black’); was the solution for me. I just noticed the other options weren’t working when I was playing around with them but I didn’t think to look at the original plugin docs for platform compatibility. I didn’t try the hex string…

Thx for the tips, unfortunately even setting backgroundColorByName(‘black’); work for…or I should, it works partially. The bar (where you find the time on the right etc.) is black, but when I tap to switch app, in reduce mode is blue (see screenshot)

If you don’t mind, have you got any ideas?

Solution:
In your index.html file, there is a meta information called theme-color. Per default this value is set to the blue we are all searching to change. Change the value to whatever, it gonna work

<meta name=“theme-color” content=“#4e8ef7”>

1 Like