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
        window.StatusBar.styleLightContent();
        //window.StatusBar.styleDefault();
        //window.StatusBar.styleBlackTranslucent();
        //window.StatusBar.styleBlackOpaque();

        // Show bar if it was initially hidden
        window.StatusBar.show();
    }

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s