React Native: Setting a Status bar background color 🎨 on Android and iOS

How do you know, iOS doesn’t have a concept of a Status bar background color, although the React Native has a StatusBar Component but only support backgroundColor for Android. So, to be possible on iOS too, we need to create a component to do this.

Let’s get started with the code!z

Before starting…

To change the Status bar background color on iPhone X, XS, XR +++, you need to use the SafeAreaView component by React Native.
So, on the iOS case, this tutorial works only for Devices below the iPhone X (iPhone 8, 7, 6, 5, etc…).

Now, we really will start with the code!

1- Create React Native App

Creating a new React Native app, from the command line:

react-native init StatusBarColorExample

2- Create the structure for the component

In your project root, create a structure for your component, like this:

The component structure

3- Starting the stateless component

Open the file GeneralStatusBarColor.js and start it as a stateless component, like this:

import React from 'react';
import { View, StatusBar} from 'react-native';
import styles from './styles/GeneralStatusBarColorStyles';
const GeneralStatusBarColor = () => <View />;
export default GeneralStatusBarColor;

4- Setting the component style

Open the file GeneralStatusBarColorStyles.js and setting the file, like this:

import { StyleSheet, Platform, StatusBar } from 'react-native';
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;
export default StyleSheet.create({
statusBar: {
height: STATUSBAR_HEIGHT
}
});

5- Encoding the component

Returning to the file GeneralStatusBarColor.js, let’s improve the code, adding the feature to changing the status bar background color on Android and iOS.

import React from 'react';
import { View, StatusBar } from 'react-native';
import styles from './styles/GeneralStatusBarColorStyles';
const GeneralStatusBarColor = ({ backgroundColor, ...props }) => (
<View style={[styles.statusBar, { backgroundColor }]}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</View>
);
export default GeneralStatusBarColor;

6- Importing and Implementing the component to the main file.js

Open the file App.js and import the component, like this:

...
import GeneralStatusBarColor from './src/components/GeneralStatusBarColor';
...

After import, replace the render method, like this:

...
render() {
return (
<View style={{ flex: 1 }}>
<GeneralStatusBarColor backgroundColor="#772ea2"
      barStyle="light-content"/>
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit   App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
</View>
);
}
...

7- Testing the GeneralStatusBarColor component

For iOS, open your simulator and in your project root, run this command:

react-native run-ios

For Android, open your simulator and in your project root, run this command:

react-native run-android

Now, you can see that the GeneralStatusBarColor component working:

I hope you enjoyed. Thank’s for your time. CYA ! o/