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