Can't Change Status Bar with Cordova

Question

I'm using Cordova do build a hybrid app, and I'm trying to dynamically change the color of the status bar. The reason I'm doing it dynamically is so that different platforms can use slightly different colors to make it feel a bit more native.

I installed cordova-plugin-statusbar in my project, and now I have the StatusBar object in my app's JS code. However, when I try to use the StatusBar.backgroundColorByHexString method, it doesn't work.

Here's the code that handles this:

function onDeviceReady() {
    document.addEventListener( 'pause', onPause.bind( this ), false );
    document.addEventListener( 'resume', onResume.bind( this ), false );


    if (StatusBar) {
        window.alert("The plugin loaded correctly.");
    }
    if (cordova.platformId == 'ios') {
        StatusBar.overlaysWebView(false);
        StatusBar.backgroundColorByHexString("#4CAF50");
        window.alert("The plugin should have run.");
    } else {
        StatusBar.backgroundColorByHexString("#388E3C");
        window.alert("The plugin should have run.");
    }
};

The code runs without throwing any errors, yet it doesn't change the status bar at all (I'm testing on an Android device, and so I'm assuming the same behavior happens on other platforms). How can I fix this?

Answer 1

I finally figured it out, so if anyone else has this problem, here's the solution:

1. Start the uninstaller for the Cordova tools extension
2. "Repair" the extension and restart Visual Studio
3. Go into settings and clear the Cordova cache
4. Change the Cordova CLI version to 5.1.1
5. In order to finish the update to 5.1.1, install the Whitelist plugin, add domain policy info to your config.xml file, and add a CSP policy tag such as <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> to every page in your app