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

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.


Yes you can:

import {StatusBar} from 'react-native';componentDidMount() {  StatusBar.setBarStyle( 'light-content',true)  StatusBar.setBackgroundColor("#0996AE")}


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