react-native-safe-area-context

react-native-safe-area-context is a library that provides a simple API for getting the safe area insets of a device, which is useful for accommodating elements like the status bar or device notch.

Installation

To install react-native-safe-area-context, use the following command:

npm install react-native-safe-area-context

or

yarn add react-native-safe-area-context

Setup

To use react-native-safe-area-context, import SafeAreaProvider from the library and wrap your root component with it, like so:

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

function App() {
  return (
    <SafeAreaProvider>
      // Your app's components
    </SafeAreaProvider>
  );
}

Usage

To use the safe area insets, you can either use the useSafeAreaInsets hook or the SafeAreaView component.

useSafeAreaInsets

The useSafeAreaInsets hook returns an object of the form { top, right, bottom, left }, where each value represents the inset in that direction.

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

function MyComponent() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top }}>
      // Your component's content
    </View>
  );
}

SafeAreaView

The SafeAreaView component is a wrapper that automatically applies the safe area insets as padding to its children.

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

function MyComponent() {
  return (
    <SafeAreaView>
      // Your component's content
    </SafeAreaView>
  );
}

Conclusion

With react-native-safe-area-context, working with the safe area insets of a device is as easy as can be. And with its simple API, you can quickly ensure that your app's components are properly aligned with the status bar and device notch, no matter the device.