Set UIStatusBarStyleLightContent

[nick]

Is it possible to set the status bar to light? I'm working on a dark background.

Also, is this the right place to ask questions like this?

[vjeux]

This is totally the right place, please keep the issues coming :)

We haven't had the need for changing UIStatusBarStyleLightContent yet so we haven't figured out a solution for it (you'll keep this same statement a lot :p). I would love to get your opinion in what would be the best way to expose it to React / JS.

[nick]

Perhaps we could have a root level component called <Application> or similar that has props like statusBarStyle. That way we can update that prop from within our app if we need to change the style while the app is running

[amccloud]

@nick For now you could set View controller-based status bar appearance to NO in your Info.plist and then add the following to your AppDelegate's application:didFinishLaunchingWithOptions:launchOptions method.

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

@vjeux Status bar style could be a barStyle property on NavigatorIOS. Another idea would be to add barStyle as an additional attribute to RKNavigatorItem. I think i'm leaning towards the latter because it allows each route to define a bar style.

[vjeux]

@amccloud: the status bar is not tied to the navigator. If you have an empty view, you still have the status bar.

Maybe we can have a module

var { StatusBarIOS } = require('react-native');

StatusBarIOS.setStyle(StatusBarIOS.style.lightContent);

And, the way you would do it is in the root react component

componentDidMount: function() {
  StatusBarIOS.setStyle(StatusBarIOS.style.lightContent);
},

What do you think about this API?

[vjeux]

Then, if you have this API, you can create the <Application> component that you suggested @nick

var Application = React.createClass({
  componentWillReceiveProps(nextProps) {
    if (this.props.statusBarStyle !== nextProps.statusBarStyle) {
      StatusBarIOS.setStyle(nextProps.statusBarStyle); 
    }
  },
  render() {
    var {statusBarStyle, children, ...props} = this.props;
    return <View {...props}>{children}</View>
  }
});

[frantic]

I like StatusBarIOS suggestion. Some people will definitely want to .hide() and .show() status bar, and it gives enough power to implement higher level abstractions like <Application> or navigator/routing integration.

[nick]

StatusBarIOS sounds great :)

[vjeux]

@nick: want to give a shot at implementing it?

[amccloud]

I also like StatusBarIOS. Trying to implement it now to learn the internals of react-native.

[nick]

@vjeux Unfortunately I have no experience whatsoever with iOS or Objective C otherwise I'd be happy to help. @amccloud good luck - would love to give it a try if you succeed

[vjeux]

@nick: gotta start somewhere? :p

[nick]

@vjeux haha you're right I should dive in. Right now I'm working on a clone of the iOS weather app to see how far I can get it. Looking good so far! My fork is at nick/react-native - when I'm a bit further along perhaps we could use it as another example.

[vjeux]

Oh, that's pretty cool already!

[nick]

Yup no prior iOS experience and about 3 hours work I got it to that. It's using https://github.com/erikflowers/weather-icons for the icons. Looking forward to seeing how far I can push it

[jamesgpearce]

@nick no regrets about giving you access :) - demo looks sick!

[subtleGradient]

Hey nick! Long time no see.
FWIW, when I wanted to change the status bar style of my app, I did it in the Info.plist

[amccloud]

I've pushed my initial work for StatusBarIOS. @vjeux the only issue I seem to run into is the type for attributes coming across the bridge. For example my BOOL values in RCTStatusBarManager are always NO or false.

[vjeux]

Wow, so fast! Looking

[nick]

I merged in @amccloud 's change to my fork and its working great :-)

[vjeux]

@amccloud do you mind doing a pull request on this repo?

[amccloud]

Yes. That is my intention. I just want to fix the issue with the BOOL values first.

[vjeux]

@a2 @nicklockwood do you know what's going on with the BOOL value?

[a2]

Just catching up on email. I commented on why that's not working. Hopefully that helps. :)

[nick]

@amccloud @vjeux do you think I can use the same method to expose a location API? Trying to get location for my Weather app and was thinking of using this code as a template.

[vjeux]

@nick: yeah, integrations with the native apis will follow a similar pattern.

It turns out that we already have the location api implemented internally but haven't yet had the time to put it on the open source version. Give us some time on this (you can expose it for yourself in the meantime, shouldn't be super hard)

[vjeux]

Was added 9674c99 :)