Status bar color not getting changed

[ask007learning]

Am I doing something wrong? the statusbar color is not changing. It works on iphone but not on android. My code below

 <NavigationBar
                  title={{title:'Notifications', tintColor:'yellow'}}
                  tintColor="#ef5350"
                  statusBar={{style: 'light-content',tintColor:'#ef5350'}}
              />

[jenskuhrjorgensen]

I'm having the same problem! :'(

According to the react-native Statusbar docs it is possible to change the style (and background color) of the status bar:

   <StatusBar
     backgroundColor="blue"
     barStyle="light-content"
   />

But in react-native-navbar it seems that only the iOS status bar is being styled:

customizeStatusBar() {
  const { statusBar } = this.props;
  if (Platform.OS === 'ios') {
    if (statusBar.style) {
      StatusBar.setBarStyle(statusBar.style);
    }

    const animation = statusBar.hidden ?
      statusBar.hideAnimation : statusBar.showAnimation;

    StatusBar.showHideTransition = animation;
    StatusBar.hidden = statusBar.hidden;
  }
}

I hope that the Android status bar styling will be added soon :)

[alexindigo]

You can use just regular StatusBar component – https://facebook.github.io/react-native/docs/statusbar.html It has backgroundColor property.

[jenskuhrjorgensen]

But can you use that in conjunction with react-native-navbar?

[alexindigo]

Yep. It doesn't render anything by itself, just modifies settings (I know feels counter-intutive, but it's what we get for using react) :)

Here is example: https://github.com/alexindigo/ndash/blob/master/app/components/Chrome.js#L151 (the app uses react-native-navbar)

[jenskuhrjorgensen]

Nice, thanks! :D However, I still think that styling the Android status bar through react-native-navbar should be possible.

[alexindigo]

For sure.

[jinhale]

None of the advice on React Native worked for me. I ended up using the advice of React Navigation for my Android app.

[abiralsubedi]

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.

[mujibjan]

my status bar color is also not changing here is the code "expo": {

"androidStatusBar": {
  "backgroundColor": "#18c22a"
},

[mujibjan]

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. This is not working i have done such this.

"expo": { "name": "Talem Islam Radio", "androidStatusBar": { "backgroundColor": "#18c22a" },

[atemp21]

workaround by adding a view under the status bar as documented in Expo (bottom of page) https://docs.expo.io/versions/latest/guides/configuring-statusbar/

[dkocich]

in my IgniteCli project, it started working with a default barStyle <StatusBar barStyle='default' backgroundColor={Colors.blue} />

[ayoubamine]

react-native-general-statusbar

npm i --save react-native-general-statusbar

import GeneralStatusBarColor from "react-native-general-statusbar";
 
function MyComponent() {
    return (
        <View>
            <GeneralStatusBarColor
                backgroundColor="#00AEEF"
                barStyle="light-content"
            />
        </View>
    );
}

[cogell]

@ayoubamine react-native-general-statusbar* didnt seem to work for me on Android 10