Does not change the status bar color on the first page (iOS)

[raefa]

Thanks for the module. Much easier than the old alternatives!

I may be doing something wrong here but this worked great for me on subsequent pages, but on the "start" page (where I added the module) it did not work. I note that I don't have an ActionBar on the start page and I am combining it with BackgroundSpanUnderStatusBar on that page.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:x="nativescript-statusbar" loaded="loaded">
  <x:StatusBar ios:barStyle="dark" android:barStyle="#E34900" />
  ...

exports.loaded = function(args) {
  var page = args.object;
  page.backgroundSpanUnderStatusBar = true;
}

Any ideas how I could change the colour on this start page?

[donaldking]

Experiencing the same issue as well.

[burkeholland]

Did you try removing the ios attribute and adding the backgroundSpanUnderStatusBar to the page XML? On Wed, Feb 24, 2016 at 7:17 PM Donald King notifications@github.com wrote:

Experiencing the same issue as well.

— Reply to this email directly or view it on GitHub https://github.com/burkeholland/nativescript-statusbar/issues/2#issuecomment-188545563 .

[donaldking]

@burkeholland This is my set up:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" xmlns:x="nativescript-statusbar" class="mainGreen" backgroundSpanUnderStatusBar="true"> <x:StatusBar ios:barStyle="light" android:barStyle="#00C0F5" />

[raefa]

Yes. I tried that too.

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:x="nativescript-statusbar" loaded="loaded"
backgroundSpanUnderStatusBar="true">

---

Raef Akehurst

raefakehurst@gmail.com +61 (0)402 884 406

On Thu, Feb 25, 2016 at 12:26 PM, Donald King notifications@github.com wrote:

@burkeholland https://github.com/burkeholland This is my set up:

xmlns:x="nativescript-statusbar" class="mainGreen" backgroundSpanUnderStatusBar="true">

— Reply to this email directly or view it on GitHub https://github.com/burkeholland/nativescript-statusbar/issues/2#issuecomment-188548030 .

[burkeholland]

I assume you're getting a white status bar on iOS? What happens when you remove the statusbar component? On Wed, Feb 24, 2016 at 8:11 PM Raef Akehurst notifications@github.com wrote:

Yes. I tried that too.

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:x="nativescript-statusbar" loaded="loaded"
backgroundSpanUnderStatusBar="true">

---

Raef Akehurst

raefakehurst@gmail.com +61 (0)402 884 406

On Thu, Feb 25, 2016 at 12:26 PM, Donald King notifications@github.com wrote:

@burkeholland https://github.com/burkeholland This is my set up:

xmlns:x="nativescript-statusbar" class="mainGreen" backgroundSpanUnderStatusBar="true">

— Reply to this email directly or view it on GitHub < https://github.com/burkeholland/nativescript-statusbar/issues/2#issuecomment-188548030

.

— Reply to this email directly or view it on GitHub https://github.com/burkeholland/nativescript-statusbar/issues/2#issuecomment-188564293 .

[donaldking]

@burkeholland How do you remove it? since it wasn't specifically added?

[burkeholland]

I mean, without the status bar specified, does the backgroundSpanUnderStatusBar work? If so, does it stop working when you then add the StatusBar? On Thu, Feb 25, 2016 at 5:53 AM Donald King notifications@github.com wrote:

@burkeholland https://github.com/burkeholland How do you remove it? since it wasn't specifically added?

— Reply to this email directly or view it on GitHub https://github.com/burkeholland/nativescript-statusbar/issues/2#issuecomment-188752427 .

[raefa]

Hi Burke. StatusBar works with and without backgroundSpanUnderStatusBar ... just not on the first page. In the attached image I have the difference scenarios. I hope this helps.

Top Image: First page of my app (intro.xml) without backgroundSpanUnderStatusBar. Status bar is white as you would expect.

Middle Image: First page of my app (intro.xml) with backgroundSpanUnderStatusBar. Status bar text is black but you would expect it to be white.

Bottom Image: Login page of my app (login.xml). Same code uses as in the example above. Given it is not the firsst page the plugin seems to kick in and work because the status bar text is white.

[burkeholland]

Ah. Thank you.

It appears that iOS requires this to be done at the app delegate level. You have to set the info.plist (located in app/App_Resources/iOS) key turning off View Controller based Status Bar Appearance...

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

You then have to specify the status bar style in the app delegate....

import application = require("application");
class MyDelegate extends UIResponder implements UIApplicationDelegate {
    public static ObjCProtocols = [UIApplicationDelegate];

    applicationDidFinishLaunchingWithOptions(application: UIApplication, launchOptions: NSDictionary): boolean {

        // set the status bar to light content
        UIApplication.sharedApplication().statusBarStyle = 1; 

        return true;
    }

    applicationDidBecomeActive(application: UIApplication): void {
        console.log("applicationDidBecomeActive: " + application)
    }
}
application.ios.delegate = MyDelegate;
application.start({ moduleName: "pages/home/home" });

[raefa]

Thanks Burke. That did the job.

For those using js rather than ts, here it is in JavaScript:

var AppDelegate = UIResponder.extend({
  applicationDidFinishLaunchingWithOptions: function () {
    // Set the status bar to light content
    UIApplication.sharedApplication().statusBarStyle = 1;
    return true;
  }
}, {
  name: "AppDelegate",
  protocols: [UIApplicationDelegate]
});
application.ios.delegate = AppDelegate;

[tjvantoll]

Just to note, if you don’t want to hardcode the 1 here, iOS does provide an enum you can use. UIStatusBarStyle.LightContent === 1

[3rror404]

sharedApplication is now a property.

UIApplication.sharedApplication().statusBarStyle = 1;

should now be

UIApplication.sharedApplication.statusBarStyle = 1;

Tripped me up there for a while.