How to avoid notches with Safe Area Context in React Native apps

Most devices nowadays come with a notch or some kind of status bar. Therefore, when building a mobile application using React Native, it is vital to ensure that the content of an app screen is rendered correctly across different types of devices.

In this article, let's take a look two different approaches to make app screens in React Native to avoid the content being positioned behind a notch or status bar.

The first approach will discuss SafeAreaView component from React Native components API. The second approach will discuss the advantage of using react-native-safe-area-context open source library and how it provides a cross-platform solution.

The Notch Problem

When you are starting to build a screen in React Native app, you might add use the following code snippet to display text:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export const HomeScreen = () => {
  return (
    <View style={[styles.container]}>
      <View style={{ backgroundColor: 'blue' }}>
        <Text style={{ fontSize: 28, color: 'white' }}>Hello World</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  }
});

The above code snippet has a parent View component with a background color of red. It wraps another View component with a background color of blue that contains a Text component to display some text on the screen.

This will display the content of the app screen on an iOS device as shown below: