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

Question

I just got started with React Native for Android, and I\'m trying to figure out if there\'s a way to change the status bar color for Android...

Like this?

Answer 1

Just add the following code to your App.js file inside your class component.

    componentDidMount(){
        StatusBar.setBarStyle( 'light-content',true)
        StatusBar.setBackgroundColor("Your color Hex-code here")
    }

And add this to your import statements.

    import {StatusBar} from 'react-native';

Answer 2

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.

Answer 3

Yes you can:

import {StatusBar} from 'react-native';

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

Answer 4

If you guys are using expo then just add this in the app.json

"androidStatusBar": {
  "backgroundColor": "#ffffff",
  "barStyle":"dark-content"
}

Refer: https://docs.expo.io/versions/latest/guides/configuring-statusbar/

Answer 5

add color.xml in ..android/app/src/main/res/values and pate following code

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   color for the app bar and other primary UI elements -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   a darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars -->
    <color name="colorPrimaryDark">#A52D53</color>

    <!--   a secondary color for controls like checkboxes and text fields -->
    <color name="colorAccent">#FF4081</color>
</resources>

copy and pate following code in ..android/app/src/main/res/values/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>    
</style>

Answer 6

Add this code on your header component

androidStatusBarColor="#34495e"