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