1---
2title: Safe areas
3description: Learn how to add safe areas for your Expo project and other best practices.
4---
5
6import { Terminal, SnackInline } from '~/ui/components/Snippet';
7import ImageSpotlight from '~/components/plugins/ImageSpotlight';
8import { BoxLink } from '~/ui/components/BoxLink';
9
10Creating 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.
11
12When 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:
13
14<ImageSpotlight
15  alt="Without defining a safe area, the content can be obscured by the device's interface elements."
16  src="/static/images/safe-area/without-safe-area.png"
17  style={{ maxWidth: 540 }}
18/>
19
20The 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.
21
22## Use `react-native-safe-area-context`
23
24[`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.
25
26Using the library, the result of the previous example changes as it displays the content inside a safe area, as shown below:
27
28<ImageSpotlight
29  alt="On using react-native-safe-area-context, the content is positioned within the safe area."
30  src="/static/images/safe-area/with-safe-area.png"
31  style={{ maxWidth: 540 }}
32/>
33
34### Installation
35
36Install `react-native-safe-area-context` by running the command below:
37
38<Terminal cmd={['$ npx expo install react-native-safe-area-context']} />
39
40### Usage
41
42#### Add `SafeAreaProvider`
43
44To 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.
45
46```jsx App.js
47import { View, Text } from 'react-native';
48import { SafeAreaProvider } from 'react-native-safe-area-context';
49
50export default function App() {
51  return (
52    <SafeAreaProvider>
53      <View>
54        <Text>My App</Text>
55      </View>
56    </SafeAreaProvider>
57  );
58}
59```
60
61Then 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.
62
63#### Use `useSafeAreaInsets` hook
64
65Alternate 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:
66
67```js
68{
69  top: number,
70  right: number,
71  bottom: number,
72  left: number
73}
74```
75
76## Minimal working example
77
78Below is a minimal working example that uses the `useSafeAreaInsets` hook to apply top padding to a view.
79
80<SnackInline label="Using react-native-safe-area-context" dependencies={['react-native-safe-area-context']}>
81
82```jsx
83import { Text, View } from 'react-native';
84import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
85
86function HomeScreen() {
87  const insets = useSafeAreaInsets();
88  return (
89    <View style={{ flex: 1, paddingTop: insets.top }}>
90      <Text style={{ fontSize: 28 }}>Content is in safe area.</Text>
91    </View>
92  );
93}
94
95export default function App() {
96  return (
97    <SafeAreaProvider>
98      <HomeScreen />
99    </SafeAreaProvider>
100  );
101}
102```
103
104</SnackInline>
105
106## Usage with React Navigation
107
108By 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/).
109
110## Usage with web
111
112If 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.
113
114## Next step
115
116<BoxLink
117  title="Fonts"
118  description="Learn more about different ways to import a custom font and use it in your app."
119  href="/develop/user-interface/fonts"
120/>
121