Change Status Bar Background Color in React Native

Sometimes, we need to use a different color on the Application Status Bar on both devices i.e. Android and IOS. In this article, we are going to learn how to change status bar background color in your React Native application. Let’s start without further delay.

Table of content

• StatusBar Background Color for IOS
• StatusBar Background Color for Android

This is what I have on my App.js file. Basically, The MainScreen is the landing screen that only contains some text.

import { StyleSheet } from 'react-native';
import MainScreen from './screens/MainScreen';

const THEME_COLOR = '#285E29';

export default function App() {
    return (
        <>
            <MainScreen />
        </>
    );
}

The constant THEME_COLOR holds the main color that we want to apply to the Status Bar as a background color.

Background Color for IOS Device

We are going to use the SafeAreaView to change the background color of the status bar for the IOS device.

SafeAreaView only applicable to iOS devices with iOS version 11 or later.

const THEME_COLOR = '#285E29';

export default function App() {
    return (
        <>
            <SafeAreaView style={styles.topSafeArea} />
            <SafeAreaView style={styles.bottomSafeArea}>
                <StatusBar barStyle="light-content" />
                <MainScreen />
            </SafeAreaView>
        </>
    );
}

const styles = StyleSheet.create({
    topSafeArea: {
        flex: 0, 
        backgroundColor: THEME_COLOR
    }, 
    bottomSafeArea: {
        flex: 1, 
        backgroundColor: THEME_COLOR
    },
});

Now if you test the above codes in the IOS simulator or real Device then its working fine with it. But as we know that the SafeAreaView is not working with Android devices, so we have to implement it in a different way.

You might also like

• Form Validation in React Native
• Add Custom Fonts to React Native
• Full-Screen Background Image in React Native

Background Color for Android Device

Let’s make a custom StatusBar to make it working with the Android device. Create a component with the name AppStatusBar.js and add the following code.

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

const AppStatusBar = ({backgroundColor, ...props}) => {
    return (
        <View style={[styles.statusBar, backgroundColor]}>
            <StatusBar backgroundColor={backgroundColor} {...props} />
        </View>
    );
};

const BAR_HEIGHT = StatusBar.currentHeight;

const styles = StyleSheet.create({
    statusBar: {
        height: BAR_HEIGHT
    },
});

export default AppStatusBar;

We have created a view with the same height and the background-color. The StatusBar.currentHeight will provide the StatusBar height of the current device. Later we have merged the backgroundColor property with the status bar style.

style={[styles.statusBar, backgroundColor]}

Finally, this is how we have implemented it to the App.js file.

import React from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';

import AppStatusBar from './components/AppStatusBar';
import MainScreen from './screens/MainScreen';

const THEME_COLOR = '#285E29';

export default function App() {
    return (
        <>
            <SafeAreaView style={styles.topSafeArea} />
            <SafeAreaView style={styles.bottomSafeArea}>
                <AppStatusBar backgroundColor={THEME_COLOR} barStyle="light-content" />
                <MainScreen />
            </SafeAreaView>
        </>
    );
}

const styles = StyleSheet.create({
    topSafeArea: {
        flex: 0, 
        backgroundColor: THEME_COLOR
    }, 
    bottomSafeArea: {
        flex: 1, 
        backgroundColor: THEME_COLOR
    },
});

We hope this article will help you to change status bar color to the React Native application. If you like this article then please follow us on Facebook and Twitter.