Nativescript: Translucent status/navigation bar support

[toddwong]

[lscown]

:+1:

extends #516

[toddwong]

I just knew that Android (above 4.4) has translucent system bars support, too. I change the issue title.

[enchev]

copied from https://github.com/NativeScript/NativeScript/issues/516

Right now the status bar inherits the colour from it's ActionBar/NavigationBar. This is not so great when you have a hidden ActionBar.

It would be great to be able to hide the status bar or add custom colours to it.

CSS property suggestions:

color
background-color

Would be great to have the status bar transparent as well. This goes for both iOS and Android (I believe the Android one overlays the background content.)

[toddanglin]

Is this still targeting the 1.6 milestone? Super common use case. I could use this support now for a simple demo app. :)

[burkeholland]

I created a plugin to do this because I find myself doing it every single time I build an app. It's hard to explain to new {N} devs about navigation controllers and such. The plugin makes it just one line of markup.

<x:StatusBar barStyle="light" />

Looks like this is going to hit in 1.7, so hopefully we can deprecate this plugin then.

[burkeholland]

I'll note that I can only get setBarStyle to work when the ActionBar is present. When it is not, the StatusBar is always white. I thought that the StatusBar was transparent by default as of iOS 7. is there some setting I need to get the page all the same color besides just...

page {
    background-color: #336699;
}

[PanayotCankov]

@burkeholland The Page has a boolean backgroundSpanUnderStatusBar property that works for iOS and you can set it in XML (does not work in CSS yet). https://github.com/NativeScript/NativeScript/blob/master/ui/page/page.d.ts#L99

[burkeholland]

Thank you! Too easy.

Seems like this should be on by default to mimic the default iOS behavior?

[PanayotCankov]

We were discussing this internally today. It may very well become a default.

[sitefinitysteve]

I vote for a default open in {N}, this is a core app style thing, not really a plugin, should be a property off Page or something

[majorpaynegh]

@burkeholland and anyone what if I want an image to span under the status bar??

[NickIliev]

@majorpaynegh

You can set background image for your Page via CSS and use the backgroundSpanUnderStatusBar property to span it under the status bar.

e.g.
page.css

Page {
    background-image: url("~/images/logo");
}

page.xml

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

[majorpaynegh]

@NickIliev i tried this and it refuses to work ..status bar still remains the same..

[timricker]

Is it possible to allow the page content itself to be seen underneath the status bar on iOS?

Eg, lets say I have a StackLayout as the first element inside my base app component. I want this to be displayed at the very top of the screen with status bar displayed transparently on top of it.

I can't seem to achieve this using the backgroundSpanUnderStatusBar page property. The page content is always displayed underneath the status bar. I am able to change the background color, however this isn't giving the desired result of a truly translucent status bar.

Any help/feedback appreciated.

[timricker]

For anyone interested, I was able to achieve the desired effect using:
this._page.style.marginTop = -20;

[majorpaynegh]

@timricker this makes makes my app crash when i launch it.where did you put this line of code

[timricker]

@majorpaynegh try putting it inside ngAfterViewInit on your base app component, it should work. In my app I'm setting it after i make a $http request but this isn't likely required in your case.

And ensure that you have the _page reference configured in your component constructor:
constructor( private _router: Router, private _page: Page )

[corebreaker]

The project of @burkeholland seems dead, someone can do a plugin for stylying the status bar and with Angular please. At now, not support for Angular.

[Ihor912]

One more fix with margin-top (based on @timricker answer).

In css:

.fullscreen {
    margin-top: -20;
    background-image: url("res://background");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

In template:

<StackLayout class="fullscreen"></StackLayout>

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.