Unable to change $cordovaStatusbar text color

Question

I'm having issues with the status bar of my Ionic app. More specifically I'm not able to change the bar default color, no matter what style I apply.

I already checked ngCordova and the cordovaStatusbar plugin are already installed correctly.

CODE SNIPPET

app.run(function ($ionicPlatform, $cordovaStatusbar) {

  $ionicPlatform.ready(function () {

        // Color the iOS status bar 
        if (window.StatusBar) {
            $cordovaStatusbar.overlaysWebView(true);
            $cordovaStatusbar.styleHex('#f50'); 
        }
    });
});

This is the result I get in xCode simulator with ionic emulate ios command.

EDIT:

After many tests I think the problem is more in depth. Neither .show() or .hide() methods are working.

app.run(function ($ionicPlatform, $cordovaStatusbar) {

  $ionicPlatform.ready(function () {

        $cordovaStatusbar.hide(); //not hiding the status bar
    });
});

Answer 1

I had the same issue in one of the apps i am developing. The following plugin worked for us https://github.com/apache/cordova-plugin-statusbar

if (window.StatusBar) {

            StatusBar.styleLightContent();
    } 

Edit: for hiding the status bar you can use window.StatusBar.hide();

Answer 2

The text can only be white or black

This will use black color:

$cordovaStatusbar.styleDefault();

Any of this will use white color:

$cordovaStatusbar.styleLightContent();
$cordovaStatusbar.styleBlackTranslucent();
$cordovaStatusbar.styleBlackOpaque();

That styles made sense before iOS 7, now they all do the same.

To change the statusbar color you have to set the overlaysWebView to false first.

$cordovaStatusbar.overlaysWebView(false);

If it's true it will be transparent and you won't be able to change the color.

Answer 3

From the plugin github page

On iOS 7, when you set StatusBar.statusBarOverlaysWebView to false, you can set the background color of the statusbar by a hex string (#RRGGBB).

So I got this working by doing the following:

1. Making sure ngCordova is installed

2. Set OverlaysWebView to false and set the color.

   if(window.StatusBar) {
      $cordovaStatusbar.overlaysWebView(false);
      $cordovaStatusbar.styleHex('#FF0000') //red
   }