---
title: Safe areas
description: Learn how to add safe areas for your Expo project and other best practices.
---

import { Terminal, SnackInline } from '~/ui/components/Snippet';
import ImageSpotlight from '~/components/plugins/ImageSpotlight';
import { BoxLink } from '~/ui/components/BoxLink';
import { BookOpen02Icon } from '@expo/styleguide-icons';

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:

<ImageSpotlight
  alt="Without defining a safe area, the content can be obscured by the device's interface elements."
  src="/static/images/safe-area/without-safe-area.png"
  style={{ maxWidth: 540 }}
/>

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`](https://github.com/th3rdwave/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:

<ImageSpotlight
  alt="On using react-native-safe-area-context, the content is positioned within the safe area."
  src="/static/images/safe-area/with-safe-area.png"
  style={{ maxWidth: 540 }}
/>

### Installation

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

<Terminal cmd={['$ npx expo install react-native-safe-area-context']} />

### Usage

#### Add `SafeAreaProvider`

To use the library, you first need to import [`<SafeAreaProvider>`](https://github.com/th3rdwave/react-native-safe-area-context#safeareaprovider) in your app's root component.

```jsx App.js
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>`](https://github.com/th3rdwave/react-native-safe-area-context#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`](https://github.com/th3rdwave/react-native-safe-area-context#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:

```js
{
  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.

<SnackInline label="Using react-native-safe-area-context" dependencies={['react-native-safe-area-context']}>

```jsx
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>
  );
}
```

</SnackInline>

## 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](https://reactnavigation.org/docs/handling-safe-area/).

## Usage with web

If you are targeting the web, you must set up `<SafeAreaProvider>` as described in the [hooks section](#use-usesafeareainsets-hook). If you are doing server-side rendering (SSR), we recommend checking out the [Web SSR section](https://github.com/th3rdwave/react-native-safe-area-context#web-ssr) in the library's documentation.

## Next step

<BoxLink
  title="Fonts"
  description="Learn more about different ways to import a custom font and use it in your app."
  href="/develop/user-interface/fonts"
  Icon={BookOpen02Icon}
/>
