cordova-plugin-statusbar not working, any working workaround?

Question

I'm working on a cordova/jquerymobile app that I'm testing on my iPhone device. By now is working great and I have these plugins installed: cordova-plugin-device 1.1.1 "Device" cordova-plugin-dialogs 1.2.0 "Notification" cordova-plugin-whitelist 1.2.1 "Whitelist" phonegap-plugin-push 1.5.3 "PushPlugin"

The status bar, of course overlays the header as known. I just added a <br> in the header div: just for testing is enough.

Now I added the cordova-plugin-statusbar 2.1.2 "StatusBar" to fix this problem since I want to add a back button in the header and the <br> tag doesn't affect the back button that goes in the right left corner with this code:

<a href="#" id="mybackbtn" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all" style="display:none;">Back</a>

I can't understand very well the documentation on https://github.com/apache/cordova-plugin-statusbar: do I have to add the settings in the config.xml of my cordova directory? or in the platform directory? or in the onDeviceReady function?

I tried all 3 ways but when I run on my device from Xcode I get this error in the console:

THREAD WARNING: ['Device'] took '23.845215' ms. Plugin should use a background thread.

The app is frozen, others plugin are not working and I can't even tap on a button or do anything. If I wait the app crashes with this message in console:

Message from debugger: Terminated due to memory issue

Anyway it seems it happens random: if I run the app again from Xcode on device it works fine after a random number of tries.

I tried with this in the index.js

onDeviceReady: function() {
            StatusBar.overlaysWebView(false);
            StatusBar.backgroundColorByName("black");
}

or with this in the config.xml in the cordova root directory

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />

and the same code in the config.xml in the platforms/ios/myapp/ but the problem is always the same. I'm not even sure in which point of the config.xml file I should add this code, I tried right before the </widget> tag but not sure it's the right place.

I found that is a known issue, but couldn't find a solution. So I was thinking if I could leave my simple <br> tag and move the button in header 20px lower or something... but I don't know exactly how to do it. And anyway I'm sure it's not the right solution due to different ios (android) or different devices (smartphones, tablets, device orientation, etc.)

Can u give me any advice or suggest any other solutions you've found? Thank you.

Answer 1

Update your CLI:

npm install -g cordova