Search code examples
phonegap-buildios7-statusbar

iOS7 StatusBar using PhoneGap Build: set background color or text color

I know variations of this question have been asked dozens of times, but I haven't yet found one that addresses this combination: I want to be able to see a non-overlapping statusbar on iOS 7, using Adobe's Phonegap Build.

I have added the PhoneGap Statusbar plugin to my config.xml:

<gap:plugin name="com.phonegap.plugin.statusbar" version="1.1.0" />

<feature name="StatusBar">
  <param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>

This causes a black statusbar to appear correctly non-overlapping my site, but the text is (presumably) black, because I can't see it.

I have removed the ios-statusbarstyle preference from config.xml for good measure, it doesn't seem to make any difference.

The plugin page mentions that the config.xml options are not supported by PhoeGap build, so I tried to use the StatusBar javascript object. This is my complete index.html file:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

      function onLoad() {
          document.addEventListener("deviceready", onDeviceReady, false);
      }

      function onDeviceReady() {
        StatusBar.show();
        StatusBar.overlaysWebView(false);
        StatusBar.backgroundColorByHexString("#C8DB2F");
      }

    </script>
  </head>
  <body onload="onLoad()">
    Test.
  </body>
</html>

but the backgroundColorByHexString() function does nothing and, in fact, there appears to be no StatusBar object at all -- this is confirmed by using PhoneGap Build's debug window, and because any JS that I try to put after those lines will not be executed, so presumably it is throwing an error.

Any thoughts on how to set either the statusbar background color or the text color? Do I have to use CLI instead of PhoneGapBuild?

Solution

  • May be too late for this... but I used your exact code and it worked for my app on phonegap build. I used this plugin instead.

    <gap:plugin name="org.apache.cordova.statusbar" version="0.1.4" />

    and this to call the onDeviceReady function:

    // wait for phonegap to be ready
document.addEventListener('deviceready', onDeviceReady, false);