Translucent status/navigation bar support #601

Closed
toddwong opened this Issue Aug 17, 2015 · 12 comments

Projects

None yet
@toddwong

No description provided.

@lscown
lscown commented Aug 18, 2015

👍

extends #516

@toddwong toddwong changed the title from iOS translucent status/navigation bar support to Translucent status/navigation bar support Aug 18, 2015
@toddwong

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

@enchev
Member
enchev commented Sep 11, 2015

copied from #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.)

@N3ll N3ll added this to the 1.5 (Under Review) milestone Oct 12, 2015
@atanasovg atanasovg removed this from the 1.5 milestone Nov 26, 2015
@N3ll N3ll added this to the 1.6.0 (Under Review) milestone Dec 15, 2015
@toddanglin
Contributor

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

@hshristov hshristov self-assigned this Feb 8, 2016
@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" />

status-bar-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
Member

@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
Member

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

@sitefinitysteve
Contributor

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

@enchev enchev added the T:Feature label Aug 9, 2016
@majorpaynegh

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

@NickIliev
Contributor

@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>
@toddwong toddwong closed this Jan 6, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment