React Native: Set different colors on Top and Bottom in SafeAreaView component

With the smartphones currently adhering the screens with the notch (smartphone screen clipping, usually to cameras, sensors and other components), the React Native had to adapt to this change too, With this, was created the SafeAreaView component.

On left, without SafeAreaView. / On Right, with SafeAreaView.

But, sometimes, on SafeAreaView component, we need using a different color on Top and another on Bottom, so, now, I will teach how you can set different colors on Top and another on Bottom on SafeAreaView component.

Let’s get started with the code!

Before starting…

To set different colors on top and bottom on SafeAreaView component, your project needs a React version (not the React Native, the React) equals or above React v16.2.0.
Because we will use Fragment component of React, and this component receives support for returning multiple children from a component’s render method on React v16.2.0.

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 SafeAreaViewApp

2- Adding new Imports to the main file.js

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

...
import React, { Component, Fragment } from 'react';
import { Platform, StyleSheet, Text, View, SafeAreaView } from 'react-native';
...

3- Implementing on the main file.js

With file App.js open, implement the render(), like this:

<Fragment>
<SafeAreaView style={{ flex: 0, backgroundColor: 'red' }} />
<SafeAreaView style={{ flex: 1, backgroundColor: 'blue' }}>
<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>
</SafeAreaView>
</Fragment>

7- Testing the implementations made

Open your simulator(Using the iPhone X or Xs, Xr, Xs Max..) and in your project root, run this command:

react-native run-ios

Now, you can see the different colors on top and bottom on SafeAreaView component:

On Top, Red. / On Bottom, Blue.

8- One more trick

Sometimes, on top, we need to use a dark color on the status bar and with that, we can’t see the status (hour, wifi signal, battery, etc..), so we need to change the status color to a light color.

9- Let change somethings on code

Add a new import, StatusBar on React Native import.

...
import { Platform, StyleSheet, Text, View, SafeAreaView, StatusBar } from 'react-native';
...

Now, add the StatusBar on render():

<Fragment>
<SafeAreaView style={{ flex: 0, backgroundColor: 'red' }} />
<SafeAreaView style={{ flex: 1, backgroundColor: 'blue' }}>
<StatusBar 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>
</SafeAreaView>
</Fragment>

Now, statuses are lighter in color.

Statuses lighter in color.

If you want back to the dark color, just change the barStyle=”light-content” to barStyle=”dark-content” on render().

So... that's it!
I hope you enjoyed. Thank’s for your time. CYA! o/