React-native-safe-area-context

 React native safe area context gives an adaptable API for accessing the device’s safe area inset information. You can place your content appropriately around the notches, status bars, home indicators and other device and OS interface elements. This also provides you with a SafeAreaView component. It is compatible with Android devices. Emulator, IOS device, emulator, web. To install it run the following using a terminal in your react native app.


$ expo install react-native-safe-area-context


The SafeAreaView is a regular view component with the safe area edges applied as padding.


import {

  SafeAreaView,

  SafeAreaProvider,

  SafeAreaInsetsContext,

  useSafeAreaInsets,

  initialWindowMetrics,

} from 'react-native-safe-area-context';

 

Two basic concepts of react context libraries are providers and consumers. safeAreaProvider component is a view from where insets provided by consumers are relative to. You will have a provider at the top of your application.

Consumers are components and hooks that allow using inset values provided by the nearest parent Provider.

 In your app’s root component add SafeAreaProvider. Add it in other places also when using react-native-screen. Providers should not be inside a View that is animated with Animated or inside a ScrollView because it can cause frequent updates.


import { SafeAreaProvider } from 'react-native-safe-area-context';

 

function App() {

  return <SafeAreaProvider>...</SafeAreaProvider>;

}