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.
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:
Install react-native-safe-area-context
by running the command below:
-
npx expo install react-native-safe-area-context
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.
useSafeAreaInsets
hookAlternate 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
}
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>
);
}
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.
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.
Learn more about different ways to import a custom font and use it in your app.