How to change the color of statusbar in iOS and Android with NativeScript

Question

I'm trying to change the color of the status bar to match the rest of the Page background-color and it seems to be not working.

Below is what my home.css looks like

Page {
    background-color: #5497CB;
    color:#ecf0f1;
}

Here is what my home.js looks like

var frameModule = require("ui/frame");

exports.loaded = function(args) {

    var page = args.object;
    var iosFrame = frameModule.topmost().ios;
    if (iosFrame) {
        iosFrame.navBarVisibility = 'never';
    }
};

And lastly here is what my home.xml

<Page loaded="loaded">
    <StackLayout orientation="vertical">
        <TextField id="email_address" text="{{ email }}" hint="Email Address" keyboardType="email" />
        <TextField secure="true" text="{{ password }}" hint="Password" />

        <Button text="Sign in" tap="signIn"/>
        <Button text="Sign up for Groceries" cssClass="link" tap="register"/>
    </StackLayout>
</Page>

As you can see nothing over complicated, just trying to get the status bar color to have a white font and same background color!

Any pointers?

Answer 1

You're not using an action bar, so you need to set the backgroundSpanUnderStatusBar on the Page element to true.

<page backgroundSpanUnderStatusBar="true">

The text will still be black, but you can change that by changing the status bar to light for the whole application.

You can use the StatusBar Plugin for more control over the status bar in NativeScript.