SafeArea

SafeAreaViews are screen-wrapping views that add extra vertical padding to counteract notches and chins for various devices. They are an important part of developing apps in React Native, however various bugs in this area have caused us to change to different libraries.

This 'package' exports 'SafeAreaView' and 'SafeAreaContext' components from other libraries. This allows developers to implement the best practice, without having to think about extra packages to install

SafeAreaView

Important: You probably want to implement the <Screen/> component instead, as it includes helpful props for composing screens.

The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.

SafeAreaView is re-exported from the react-native-safe-area-view package.

We recommend using the <Screen/> component instead.

<SafeAreaView>
  <Text>Screen content</Text>
</SafeAreaView>

SafeAreaContext

Important: You probably want to implement the <AppWrapper/> component instead, as it includes SafeAreaContext among other things.

SafeAreaContext is a provider that wraps your application. It is re-exported from the react-native-safe-area-context package.

We recommend using the <AppWrapper/> component instead.