Change status bar color with react-navigation

user_2019761 0
Viewed 41942

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 ?

android-statusbar react-navigation react-native
8 Answers

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.

user_94960770

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>
    )
}
user_90687810

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>
    );
  }
}

user_34485400

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!

user_93464000
Related