Safe areas

Learn how to add safe areas for your Expo project and other best practices.

Creating a safe area is a great way to ensure that your app's content is appropriately positioned around notches, status bars, home indicators, and other device and operating system interface elements.

When the content on your app's screen is not positioned within the safe area, it can be obscured by the device's interface elements, as shown in the example below:

The content is positioned at the top of the screen in the above example. On Android, it is concealed by the status bar. On iOS, it is concealed by the rounder corners, the notch, and the status bar.

Use react-native-safe-area-context

react-native-safe-area-context provides a flexible API for accessing device-safe area inset information for both Android and iOS. It also provides a SafeAreaView component that you can use in place of View to inset your views to account for safe areas automatically.

Using the library, the result of the previous example changes as it displays the content inside a safe area, as shown below:

Installation

Install react-native-safe-area-context by running the command below:

Usage

Add SafeAreaProvider

To use the library, you first need to import <SafeAreaProvider> in your app's root component.

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

export default function App() {
  return (
    <SafeAreaProvider>
      <View>
        <Text>My App</Text>
      </View>
    </SafeAreaProvider>
  );
}

Then you can use the <SafeAreaView>, which is a regular <View> with the safe area insets applied as padding or margin.

Use useSafeAreaInsets hook

Alternate to <SafeAreaView>, you can also use useSafeAreaInsets hook that gives direct access to the safe area insets. It offers more flexibility and gives you more control. You can apply padding for each edge using an inset from this hook. The hook provides the insets in the following form:

{
  top: number,
  right: number,
  bottom: number,
  left: number
}

Minimal working example

Below is a minimal working example that uses the useSafeAreaInsets hook to apply top padding to a view.

import { Text, View } from 'react-native';
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';

function HomeScreen() {
  const insets = useSafeAreaInsets();
  return (
    <View style={{ flex: 1, paddingTop: insets.top }}>
      <Text style={{ fontSize: 28 }}>Content is in safe area.</Text>
    </View>
  );
}

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

Usage with React Navigation

By default, React Navigation supports safe areas and uses react-native-safe-area-context as a peer dependency. For more information on how it uses the library, see the React Navigation documentation.

Usage with web

If you are targeting the web, you must set up <SafeAreaProvider> as described in the hooks section. If you are doing server-side rendering (SSR), we recommend checking out the Web SSR section in the library's documentation.

Next step