react-native-safe-area-view

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

The react-native-safe-area-view package is designed to help developers handle safe area insets in React Native applications. This is particularly useful for devices with notches, rounded corners, or other screen features that require content to be adjusted to avoid being obscured.

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

Safe Area View

This feature allows you to wrap your content inside a SafeAreaView component to ensure it is displayed within the safe area boundaries of the device.

import SafeAreaView from 'react-native-safe-area-view';
import { View, Text } from 'react-native';

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Content inside safe area</Text>
    </View>
  </SafeAreaView>
);

Custom Insets

This feature allows you to customize the insets for the SafeAreaView component, specifying which edges should always or never be considered safe.

import SafeAreaView from 'react-native-safe-area-view';
import { View, Text } from 'react-native';

const App = () => (
  <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always', bottom: 'never' }}>
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Content with custom insets</Text>
    </View>
  </SafeAreaView>
);

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

react-native-safe-area-context

The react-native-safe-area-context package provides a more modern and flexible way to handle safe area insets. It uses a context API to provide safe area insets to any component in the tree, allowing for more granular control compared to react-native-safe-area-view.

react-native-safe-area

The react-native-safe-area package offers similar functionality by providing a higher-order component and hooks to manage safe area insets. It is another alternative to react-native-safe-area-view, with a focus on simplicity and ease of use.

README

react-native-safe-area-view

This library provides automatic padding when a view intersects with a safe area (notch, status bar, home indicator).

Installation

In the Expo managed workflow:

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

In bare React Native projects:

yarn add react-native-safe-area-view react-native-safe-area-context

Next, you need to link react-native-safe-area-context. If you are using autolinking, run pod install again. If not, follow these instructions. Then re-build your app binary.

Usage

First you need to wrap the root of your app with the SafeAreaProvider.

import * as React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import MyAwesomeApp from './src/MyAwesomeApp';

export default function App() {
  return (
    <SafeAreaProvider>
      <MyAwesomeApp />
    </SafeAreaProvider>
  );
}

Now you can wrap components that touch any edge of the screen with a SafeAreaView.

import SafeAreaView from 'react-native-safe-area-view';

export default function MyAwesomeApp() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <Text>
          Look, I'm safe! Not under a status bar or notch or home indicator or
          anything! Very cool
        </Text>
      </View>
    </SafeAreaView>
  );
}

forceInset

Sometimes you will observe unexpected behavior and jank because SafeAreaView uses onLayout then calls measureInWindow on the view. If you know your view will touch certain edges, use forceInset to force it to apply the inset padding on the view.

<SafeAreaView forceInset={{ top: 'always' }}>
  <View>
    <Text>Yeah, I'm safe too!</Text>
  </View>
</SafeAreaView>

forceInset takes an object with the keys top | bottom | left | right | vertical | horizontal and the values 'always' | 'never'. Or you can override the padding altogether by passing an integer.

Accessing safe area inset values

Sometimes it's useful to know what the insets are for the top, right, bottom, and left of the screen. See the documentation for react-native-safe-area-context for more information.