Change status bar color with react-navigation

react-native react-navigation android-statusbar
Arnaud picture Arnaud · Jun 2, 2017 · Viewed 32k times · Source

I use a DrawerNavigator from react-navigation in my app. Without any customization, the Android status bar is blue, and not black.

I tried to do

StatusBar.setBackgroundColor('#000000');

but it only works for a few seconds, and then it goes back to blue. It seems that something I am using set the status bar color to blue. However, I tried to remove all dependencies and only keep react-navigation, and it still happens and the docs of react-navigation do not say anything about that.

How can I set the status bar color to black with react-navigation ?

Answer

Balthazar picture Balthazar · Jun 4, 2017

I don't think there is any conflict between react-navigation and the StatusBar, but I think you should use the <StatusBar> component rather than the imperative API. There's a high chance this is due to a re-render of your app and it just switch back to the default, with a component declare, you ensure it won't happen.

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

You can even have multiple ones per route, to change it depending on the path. If you want to change it depending on the user and using redux, declare it in a connected component and pass the backgroundColor.

Related questions

How to change navigation header color in react native?

How do I change the color of the navigation header in a React Native app? I tried initialising background color but it didn't work. Below is my code snippet for navigationOptions: static navigationOptions = ({ navigation }) => ({ header: props => <Header …

Read More
React native statusbar not working with react-navigation in android

Versions: "native-base": "^2.4.2", "react": "16.3.1", "react-native": "0.55.2", "react-native-global-font": "^1.0.1", "react-native-router-flux": "^4.0.0-beta.28", "react-navigation": "^1.5.11" When i add react-navigation i am not able to change statusbar color, my statusbar become blue. Here's my Navigationview.js code render() { return ( <Root style={styles.container}> <StatusBar backgroundColor="…

Read More
Hide header in stack navigator React navigation

I'm trying to switch screen using both stack and tab navigator. const MainNavigation = StackNavigator({ otp: { screen: OTPlogin }, otpverify: { screen: OTPverification}, userVerified: { screen: TabNavigator({ List: { screen: List }, Settings: { screen: Settings } }), }, }); In this case stacknavigator is used first and then tabnavigator. and …

Read More