react-native-safe-area-context

What is react-native-safe-area-context?

The react-native-safe-area-context package provides a way to handle safe area insets in a React Native application. It helps to ensure that content is not obscured by device notches, status bars, or other screen elements.

What are react-native-safe-area-context's main functionalities?

SafeAreaProvider

The SafeAreaProvider component is used to wrap the entire application or a part of it to provide safe area insets to its children.

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

const App = () => {
  return (
    <SafeAreaProvider>
      {/* Your app content */}
    </SafeAreaProvider>
  );
};

useSafeAreaInsets

The useSafeAreaInsets hook provides the current safe area insets, which can be used to adjust the layout of components to avoid overlaps with device notches or status bars.

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

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

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

SafeAreaView

The SafeAreaView component is a view that automatically applies safe area insets as padding to its children, ensuring that content is not obscured by device notches or status bars.

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

const MyScreen = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* Your screen content */}
    </SafeAreaView>
  );
};

Other packages similar to react-native-safe-area-context

react-native-safe-area-view

The react-native-safe-area-view package provides a similar functionality to react-native-safe-area-context by offering a SafeAreaView component that applies safe area insets to its children. However, it does not provide hooks like useSafeAreaInsets and is generally considered less flexible.

react-native-safe-area

The react-native-safe-area package offers utilities to handle safe area insets, but it is less comprehensive compared to react-native-safe-area-context. It primarily focuses on providing a SafeAreaView component and lacks the context and hooks provided by react-native-safe-area-context.

README

About

App & Flow is a Montreal-based React Native engineering and consulting studio. We partner with the world’s top companies and are recommended by Expo. Need a hand? Let’s build together. [e-mail]

react-native-safe-area-context

A flexible way to handle safe area, also works on Android and Web!

Documentation

Check out our documentation site.

Contributing

See the Contributing Guide