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!

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!

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

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

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

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

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

On Top, Red. / On Bottom, Blue.

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.

Add a new import, StatusBar on React Native import.

Now, add the StatusBar on render():

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/

Revolutionising the Universe of Food at iFood as Software Engineer.