Change iOS status bar text colour

This is a two-stage process in MobileFirst Platform (Worklight).

Turn off view controller-based status bar appearance

In Xcode, Head to your project’s “Info” tab, and open the “Custom iOS Target Properties” section:

Screen Shot 2015-02-24 at 10.10.13

If you already have a property named “View controller-based status bar appearance”, set its value to NO.

Otherwise, to add it, hover over an existing property. Two icons will appear: + and -. Click +, and type “View controller-based status bar appearance”. You’ll notice this is auto-completed for you. Set the new property’s value to NO.

Additionally, you can opt to initially hide the status bar while the splash screen is showing. To do this, add another new property “Status bar is initially hidden” with value YES.

Instruct Cordova to change the appearance

Insert the following into the wlEnvInit() function in your iphone/js/main.js file:

    if (window.StatusBar) {
        // Relies on UIViewControllerBasedStatusBarAppearance false

        // Show bar if it was initially hidden;

The above instructs Cordova to style the status bar with light text, and then show it if it was hidden. This function is provided by Cordova’s StatusBar plugin, included in all hybrid applications by MobileFirst Platform.

You can read more about the StatusBar plugin, and the functions it provides to change status bar appearance, here.