React-native-router-flux: Change Statusbar Color?

Created on 1 Apr 2016 · 9Comments · Source: aksonov/react-native-router-flux

I can't seem to find a way to change the very top status bar (iphone) to be dark background with white icons, since the navbar I am using is dark. Any idea how to get it to work? I looked into react native's documentation on Status Bar but can't seem to understand what is needed, or if there is a way to do it with this plugin. Any ideas?

Source

MovingGifts

Most helpful comment

You can call StatusBar.setBarStyle('light-content', true); to change the status bar text/icons to white. Remember to include StatusBar from react-native.

lee-gray on 1 Apr 2016

👍64 🎉7

All 9 comments

AFIKT it cannot be done on iOS. The docs are quite clear about it.

jeroenbourgois on 1 Apr 2016

👎34 😕3

@jeroenbourgois Hmmm.. I must have missed that, where specifically does it say it cannot be done in iOS? There has got be a way to have it work on dark navbar :)

MovingGifts on 1 Apr 2016

You can call StatusBar.setBarStyle('light-content', true); to change the status bar text/icons to white. Remember to include StatusBar from react-native.

lee-gray on 1 Apr 2016

👍64 🎉7

@lee-gray Works great! Thanks man :)

MovingGifts on 3 Apr 2016

😄1

@lee-gray Thanks!
rad-sunny-delight-d-ja8v9vQFdbCiQ

brochester-was-here on 1 Jun 2016

Fantastic!!

hejiaji on 13 Oct 2016

Thanks!

lin493369 on 2 Dec 2016

cannot use backgroundColor in StatusBar in IOS, it only works in android. use setBarStyle={color} or set backgroundColor in View that covers StatusBar instead :)

sirawatGG on 23 Dec 2016

👍1

There's this way.

<Scene
  key="tabbar"
  tabs={true}
  👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻
  onSelect={el => {
    if (typeof Actions !== 'object') return;
    const {
      sceneKey,
      statusBarStyle
    } = el.props
    if (statusBarStyle) {
      StatusBar.setBarStyle(statusBarStyle, true)
      Actions[sceneKey]()
    }
  }}>
  <Scene
    key="tab_1"
    title="home"
    component={Home}
    icon={TabIcon}
    👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻
    statusBarStyle="light-content" />
.
.
.