React Native: Setting a Status bar background color 🎨 on Android and iOS
By: Samuel Matias
Tags: Mobile App Development, JavaScript, Reactjs, React, React Native

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/