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?

score 51 · Answer 1 · answered Jul 29 '16 at 08:48

51

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.

answered Jul 29 '16 at 08:48

eden

5,876
2
28
43

1

This works and editing styles.xml in android project won't work. Thanks. – Qing Dec 19 '16 at 14:22
Navigator is deprecated now. So looking for a better solution. – Vivek Maru Aug 28 '17 at 12:24
4

StatusBar is a component, use it with any navigator you like. It was just an example – eden Aug 28 '17 at 12:25
Helpful tip on styling the top view with flex:1 – ahron Jun 21 '21 at 19:02

ShadowUC · Answer 2 · 2022-02-03T17:43:28.113

25

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

edited Feb 03 '22 at 17:43

answered Sep 10 '18 at 04:29

ShadowUC

724
6
19

score 24 · Answer 3 · edited Mar 21 '20 at 22:24

24

Yes you can:

import {StatusBar} from 'react-native';

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

edited Mar 21 '20 at 22:24

5eb

14,798
5
21
65

answered Feb 15 '19 at 11:55

Ahmad Moussa

1,296
18
22

score 6 · Answer 4 · answered Sep 24 '15 at 08:40

6

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

answered Sep 24 '15 at 08:40

kzzzf

2,614
1
16
7

1

Wow, I totally forgot that there's an actual Java project underneath the React Native stuff. Though I guess I'll have to use a values-21 folder as the colorPrimary/colorPrimaryDark stuff is only available on Lollipop and above. Or bring in AppCompat... – russjr08 Sep 27 '15 at 02:22

score 6 · Accepted Answer · answered Oct 08 '15 at 12:54

6

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

answered Oct 08 '15 at 12:54

Nishanth Shankar

1,966
1
14
19

Thanks for the module! I'm going to mark this as the answer as it seems to be the "React" way to go about it. – russjr08 Oct 08 '15 at 21:59
2

What about coloring the navigation bar? – user1532043 Mar 08 '16 at 19:51
I don't think android has released an api for that yet – Nishanth Shankar Mar 17 '16 at 06:54
But what about coloring 'Action Bar' or 'App Bar' or 'Navigation Bar'? – prasang7 May 05 '20 at 00:21

score 6 · Answer 6 · answered Oct 12 '17 at 00:50

6

Add this code on your header component

androidStatusBarColor="#34495e"

answered Oct 12 '17 at 00:50

Andrien Pecson

282
3
13

score 6 · Answer 7 · answered Jul 27 '19 at 06:36

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>

score 4 · Answer 8 · answered Sep 24 '18 at 07:17

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.

Nishanth Shankar · Answer 9 · 2015-10-08T12:33:35.600

3

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

edited Oct 08 '15 at 12:33

answered Sep 24 '15 at 03:26

Nishanth Shankar

1,966
1
14
19

score 3 · Answer 10 · answered Jul 08 '19 at 05:56

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';

score 2 · Answer 11 · answered Mar 06 '20 at 16:33

2

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/

answered Mar 06 '20 at 16:33

SKG

774
6
7

score 1 · Answer 12 · answered Sep 14 '20 at 05:48

1

Use backgroundColor Prop in the StatusBar Component

<StatusBar backgroundColor="#yourColor" />

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

answered Sep 14 '20 at 05:48

Dhanuka Perera

1,395
3
19
29

Marvin · Answer 13 · 2021-03-01T03:07:35.283

1

You can use react-native-navigation-bar-color this module to change NavigationBar, install it using npm i react-native-navigation-bar-color

edited Mar 01 '21 at 03:07

answered Mar 01 '21 at 02:28

Marvin

647
7
15

score 0 · Answer 14 · answered Apr 13 '23 at 09:49

0

You can use an expo package NavigationBar to change color of Android navigation bar: https://docs.expo.dev/versions/latest/sdk/navigation-bar/

There is also a package to change the StatusBar color.

answered Apr 13 '23 at 09:49

pe.kne

655
3
16

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

14 Answers14

Linked