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

There is no way currently to do that from JS. You can customize it by using a custom theme. Check out android/src/main/res/values/styles.xml file from your project (template is here: https://github.com/facebook/react-native/blob/master/local-cli/generator-android/templates/src/app/src/main/res/values/styles.xml) and read more here: https://developer.android.com/training/material/theme.html

Answer 2

There is no exposed API for now. This will work only from Android 5.0. Working on a bridge module to achieve the same. Will keep you posted

Answer 3

Use backgroundColor Prop in the StatusBar Component

<StatusBar backgroundColor="#yourColor" />

Check docs more information : https://reactnative.dev/docs/statusbar

Answer 4

If you are using Expo for React Native then here is the solution for setting Android Status Bar Color.

First of all, In your app.json file add the code:

{
  "expo": {
    "sdkVersion": "Your given Version",
    "androidStatusBar": {
       "backgroundColor": "#4e2ba1" (Your desirable android Status Bar Color before the app loads)
    }
   }    
}

And then Go to Your Main Component or App.js, import 'StatusBar' from 'react-native'. Then add Following Code in return:

return(
   <View style={{flex: 1}}>  (Do not forget to style flex as 1)
      <StatusBar translucent backgroundColor="rgba(0,0,0,0.2)"/>
      <Your Code>
   </View>
);

Here, we are setting the status bar color as Black but with 0.2 opacity. Your statusBar Color will be the same as your headerStyle background Color for Stack Navigator but a bit darker. For standard Android App, this is how the StatusBar color is set. Also, Make it translucent so that your app draws under the status Bar and looks nice.

It hope this works perfectly for you.

Answer 5

I've made an npm package to control the StatusBar in android

https://www.npmjs.com/package/react-native-android-statusbar

The color changes do not reflect for versions before 21

Answer 6

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>

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