Set UIStatusBarStyleLightContent about react-native HOT 26 CLOSED

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.

from react-native.

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

from react-native.

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

from react-native.

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

from react-native.

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>
  }
});

from react-native.

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.

from react-native.

StatusBarIOS sounds great :)

from react-native.

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

from react-native.

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

from react-native.

@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

from react-native.

@nick: gotta start somewhere? :p

from react-native.

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

from react-native.

Oh, that's pretty cool already!

from react-native.

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

from react-native.

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

from react-native.

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

from react-native.

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.

from react-native.

Wow, so fast! Looking

from react-native.

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

from react-native.

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

from react-native.

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

from react-native.

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

from react-native.

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

from react-native.

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

from react-native.

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

from react-native.

Was added 9674c99 :)

from react-native.