Change Status Bar Background Color in React Native

Sometimes, we need using a different color on the Application Status Bar on both devices i.e. Android and IOS. Let’s start without further delay.

Table of content

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.

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

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.