Render Components Within Safe Area Boundaries For All React Native Apps

The react native library provides a component called SafeAreaView which facilitates containing the content within the safe area boundaries of a device thereby avoiding display notches or cutouts.

It achieves so by applying padding to the nested content so as to avoid navigation bars, tab bars, toolbars, and other ancestor views. This feature unfortunately is currently only applicable to iOS devices with iOS version 11 or later as of version v0.61. See docs.

All hopes however aren't lost!

Thanks to the awesome JS community, we can use react-native-safe-area-context library to handle safe area insets in our react native applications so as to dogde display notches. The great thing about this solution is that it would work across both iOS and Andriod platforms.

Let's see it in action!

Install Dependencies

You would first need to install react-native-safe-area-context library dependency in your app.

Wrap <App/> Inside <SafeAreaProvider/>

The library react-native-safe-area-context takes care of identifying the safe area boudaries of any device and implements context using react Context API to make the boundary information available to all app components via <SafeAreaProvider/> component, which is where the device boundary information lives as context and useSafeArea hook, which allows to fetch context data directly in any child component.

Since the context is only accessible to the child components, we need to wrap the top level components within the <SafeAreaProvider> component, like so:

Wrap Child Components Within <SafeAreaView/> Component

We are now set to save our content from display notches. Simply wrap your react components within <SafeAreaView/> component also provided by the library to avoid display notches and pass custom styles as per your needs.

The <SafeAreaView/> component provided by the react-native-safe-area-context library works by calling the useSafeArea hook on your behalf and updating the paddings on the view which is finally returned as the react native component at your disposal.

Hope you find this post useful when in need! I have also written a small app to demo the same in action which you can find here on github.