Is there a way to change the Android status bar color with React Native?

You can use React Native Status Bar(detailed description here). All you need to do is wrapping navigator with a view and adding a StatusBar component above it. Don't forget to import StatusBar from 'react-native' package.

<View>
  <StatusBar
    backgroundColor="blue"
    barStyle="light-content"
  />
  <Navigator
    initialRoute={{statusBarHidden: true}}
    renderScene={(route, navigator) =>
      <View>
        <StatusBar hidden={route.statusBarHidden} />
         ...
      </View>
    }
  />
</View>

One thing I've noticed is that you should style the parent View with flex:1, without it you'll just see a white blank screen. It's not mentioned in RN Documents though.


You can use react-native in-build StatusBar function

import {StatusBar} from 'react-native';

render() {
  return <View>
     <StatusBar
        backgroundColor="#264d9b"
        barStyle="light-content"
     />
     ... //Your code
   </View>
}

reference: https://facebook.github.io/react-native/docs/statusbar


Yes you can:

import {StatusBar} from 'react-native';

componentDidMount() {
  StatusBar.setBarStyle( 'light-content',true)
  StatusBar.setBackgroundColor("#0996AE")
}