Change status bar color with react-navigation

Question

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 ?

score 28 · Accepted Answer · answered Jun 04 '17 at 17:26

28

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.

answered Jun 04 '17 at 17:26

Preview

35,317
10
92
112

I also tried that but it has no effect. However I am not really sure where I am supposed to put this. – Arnaud Jun 04 '17 at 22:28
1

On your top level root component or top level `View`. Checkout [this answer](https://stackoverflow.com/a/39300715/2054072) too that might help if you want to have it for both platforms. – Preview Jun 04 '17 at 22:48
6

Thanks! (Bounty can be awarded tomorrow). For readers: this does not work if you use NativeBase. See this page for a solution: https://github.com/GeekyAnts/NativeBase/issues/323 – Arnaud Jun 04 '17 at 23:10

score 5 · Answer 2 · answered Sep 05 '17 at 15:39

Like Aperçu said no conflict between react-navigation and the StatusBar. Each screen should be able to set properties on the device's status bar, and the container defined in createNavigationContainer should get the options on state change, and apply them natively. try this for StatusBar for entire App.

const AppContent = StackNavigator({
  Home: { screen: HomeScreen },
  Secondary: { screen: SecondaryScreen },
});

const App = () =>
  <View style={{flex: 1}}>
    <StatusBar backgroundColor="blue" barStyle="light-content"/> 
    // style the bar. barStyle is text and icon color od status bar.
   <AppContent />
 </View>;

score 3 · Answer 3 · edited Jun 05 '17 at 19:02

import React, {Component} from 'react';
import {Text, TouchableOpacity, View, StatusBar} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import styles from "../styles/Style";

class ProfileScreen extends Component {

    static navigationOptions = ({navigation}) => {
        return {
            headerLeft: (
                <TouchableOpacity onPress={() => {
                    navigation.navigate('DrawerOpen');
                }}>
                    <Icon name="menu" size={30} color="#fff" style={styles.burgerIcon}/>
                </TouchableOpacity>
            ),
            title: 'My Profile',
            headerRight: (
                <Icon name={'edit'} size={30} color={'#fff'} style={styles.headerRightIcon}/>
            ),
            headerTintColor: "#fff",
            headerStyle: {
                backgroundColor: '#8BC83D',
                height: 56,
                elevation: null
            }
        };
    };

    render() {
        return (
            <View style={styles.screenContainer}>

                <StatusBar
                    backgroundColor="#7CB236"
                    barStyle="light-content"
                />
                <Text style={styles.welcome}>
                    I amsecond reder
                </Text>
            </View>
        );
    }
}
const ProfileScreenList = StackNavigator(
    {
    ProfileScreenIndex: {screen: ProfileScreen},
}
);
export default ProfileScreenList

score 3 · Answer 4 · answered Dec 22 '20 at 22:52

To avoid manually handling mounting and unmounting of screens by e.g. updating a redux state, you can also use react navigation's useIsFocused.

Let's say you want a single screen in a route to have a dark themed StatusBar:

import { StatusBar, View } from 'react-native';
import { useIsFocused } from '@react-navigation/native';

export default function MyDarkScreen() {
    const isFocused = useIsFocused();
    return (
        <View>
            {
                isFocused &&
                <StatusBar
                    barStyle={'dark-content'}
                    translucent
                    backgroundColor="transparent"
                />
            }
            <SomeOtherComponent />
        </View>
    )
}

score 0 · Answer 5 · answered Jun 02 '17 at 10:34

0

Did you try setting your DrawerNavigator config ? Doc says that contentOptions allows you to customize the drawer content.

In the file where you define your DrawerNavigator, maybe your router.js file. You should create your Navigator as:

const MyApp = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
        contentOptions: {
            inactiveBackgroundColor: '#000000',
        }
   },
});

Maybe this page will help you: DrawerNavigator

Currently, your Drawer is certainly re-rendered at some point, that's why the color returns to blue.

answered Jun 02 '17 at 10:34

ElFreddy

136
2
4

Unfortunately it does not work. I think that inactiveBackgroundColor is not supposed to control the color of the status bar. – Arnaud Jun 02 '17 at 10:54
Have you declared a StackNavigator in which you add your DrawerNavigator ? Because you can customize the HeaderStyle with the NavigationOptions there. First, I thought you wanted to change the color of the drawer background, but what you want is customize the header at the top of the screen, right ? – ElFreddy Jun 02 '17 at 11:01
Neither the drawer background nor the header. I want to customize the status bar (http://www.gizmobolt.com/wp-content/uploads/2015/02/Sony-Android-Lollipop-5.0-Status-Bar.png) – Arnaud Jun 02 '17 at 11:07

score 0 · Answer 6 · answered Nov 11 '20 at 04:02

On top of @Balthazar's answer, if you are using SafereaView then you might need to set the Status Bar color in your stylesheet like this:

SafeArea: {
    flex: 1,
    backgroundColor: StatusBar.setBackgroundColor('black'),
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
 }

P.S. this code also detects the SafeAreaView in android devices with notch.

score -1 · Answer 7 · answered Oct 29 '18 at 08:46

You may want to use this, plugin navigationbar-react-native !

1, Install plugin

npm i navigationbar-react-native --save

2, Using

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,Image,
  View, 
  TouchableOpacity,
} from 'react-native';
import NavigationBar from 'navigationbar-react-native';
 
const ComponentLeft = () => {
  return(
    <View style={{ flex: 1, alignItems: 'flex-start'}} >
       <TouchableOpacity style={ {justifyContent:'center', flexDirection: 'row'}}>
        <Image 
          source={require('./img/ic_back.png')}
          style={{ resizeMode: 'contain', width: 20, height: 20, alignSelf: 'center' }}
        />
        <Text style={{ color: 'white', }}>Back Home</Text>
      </TouchableOpacity>
    </View>
  );
};
 
const ComponentCenter = () => {
  return(
    <View style={{ flex: 1, }}>
       <Image
        source={require('./img/ic_logo.png')}
        style={{resizeMode: 'contain', width: 200, height: 35, alignSelf: 'center' }}
      />
    </View>
  );
};
 
const ComponentRight = () => {
  return(
    <View style={{ flex: 1, alignItems: 'flex-end', }}>
      <TouchableOpacity>
        <Text style={{ color: 'white', }}> Right </Text>
      </TouchableOpacity>
    </View>
  );
};
 
class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <NavigationBar 
          componentLeft     = { () =>  {<ComponentLeft />   }
          componentCenter   = { () =>  {<ComponentCenter /> }
          componentRight    = { () =>  {<ComponentRight />  }
          navigationBarStyle= {{ backgroundColor: ''#215e79'' }}
          statusBarStyle    = {{ barStyle: 'light-content', backgroundColor: '#215e79' }}
        />
      </View>
    );
  }
}

score -1 · Answer 8 · answered Feb 07 '21 at 05:52

In your root component, you have to import

StatusBar

You can follow the below code.

import React from 'react';
import {Text, View, StatusBar} from 'react-native';


const Home = () => {
      return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
           <StatusBar backgroundColor="#44A72C" barStyle="light-content" />
           <Text style={{fontFamily: 'UniNeueRegular-Italic'}}>Home Screen</Text>
        </View>
        );
      };
export default Home;

Thanks!

Change status bar color with react-navigation

8 Answers8

Linked