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

react-native-safe-area-context

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

Getting started

Install the library using either Yarn:

yarn add react-native-safe-area-context

or npm:

npm install --save react-native-safe-area-context

You then need to link the native parts of the library for the platforms you are using. The easiest way to link the library is using the CLI tool by running this command from the root of your project:

react-native link react-native-safe-area-context

If you can't or don't want to use the CLI tool, you can also manually link the library using the instructions below (click on the arrow to show them):

Manually link the library on iOS

Either follow the instructions in the React Native documentation to manually link the framework or link using Cocoapods by adding this to your Podfile:

pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'

Manually link the library on Android

Make the following changes:

android/settings.gradle

include ':react-native-safe-area-context'
project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')

android/app/build.gradle

dependencies {
   ...
   implementation project(':react-native-safe-area-context')
}

android/app/src/main/.../MainApplication.java

On top, where imports are:

import com.th3rdwave.safeareacontext.SafeAreaContextPackage;

Add the SafeAreaContextPackage class to your list of exported packages.

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            ...
            new SafeAreaContextPackage()
    );
}

Usage

Add SafeAreaProvider in your app root component:

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

function App() {
  return <SafeAreaProvider>...</SafeAreaProvider>;
}

Usage with hooks api:

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

function HookComponent() {
  const insets = useSafeArea();

  return <View style={{ paddingTop: insets.top }} />;
}

Usage with consumer api:

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

class ClassComponent extends React.Component {
  render() {
    return (
      <SafeAreaConsumer>
        {insets => <View style={{ paddingTop: insets.top }} />}
      </SafeAreaConsumer>
    );
  }
}

Usage with SafeAreaView:

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

function SomeComponent() {
  return (
    <SafeAreaView>
      <View />
    </SafeAreaView>
  );
}

Web SSR

If you are doing server side rendering on the web you can use initialSafeAreaInsets to inject insets value based on the device the user has, or simply pass zero values. Since insets measurement is async it will break rendering your page content otherwise.

Optimization

To speed up the initial render, you can import initialWindowSafeAreaInsets from this package and set as the initialSafeAreaInsets prop on the provider as described in Web SSR. You cannot do this if your provider remounts, or you are using react-native-navigation.

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

function App() {
  return (
    <SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}>
      ...
    </SafeAreaProvider>
  );
}

Resources

• Great article about how this library can be used: https://dev.to/brunolemos/adding-notch-support-to-your-react-native-android-app-3ci3