react-native-safe-area-context
provides a flexible API for accessing device safe area inset information. This allows you to position your content appropriately around notches, status bars, home indicators, and other such device and operating system interface elements. It also provides a SafeAreaView
component that you can use in place of View
to automatically inset your views to account for safe areas.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install react-native-safe-area-context
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import { SafeAreaView, SafeAreaProvider, SafeAreaInsetsContext, useSafeAreaInsets, initialWindowMetrics, } from 'react-native-safe-area-context';
SafeAreaView
is a regular View
component with the safe area edges applied as padding.SafeAreaProvider
as described in the hooks section. You do not need to for native platforms.import { SafeAreaView } from 'react-native-safe-area-context'; function SomeComponent() { return ( <SafeAreaView> <View /> </SafeAreaView> ); }
true
(default) or false
top
, right
, bottom
, and left
. Defaults to all.SafeAreaView
when rotating the device.SafeAreaProvider
in your app root component. You may need to add it in other places too, including at the root of any modals any any routes when using react-native-screen
.import { SafeAreaProvider } from 'react-native-safe-area-context'; function App() { return <SafeAreaProvider>...</SafeAreaProvider>; }
useSafeAreaInsets
hook to get the insets in the form of { top: number, right: number, bottom: number: number, left: number }
.import { useSafeAreaInsets } from 'react-native-safe-area-context'; function HookComponent() { const insets = useSafeAreaInsets(); return <View style={{ paddingTop: insets.top }} />; }
import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; class ClassComponent extends React.Component { render() { return ( <SafeAreaInsetsContext.Consumer> {insets => <View style={{ paddingTop: insets.top }} />} </SafeAreaInsetsContext.Consumer> ); } }
SafeAreaView
. It's implemented natively so when rotating the device, there is no delay from the asynchronous bridge.initialWindowMetrics
from this package and set as the initialMetrics
prop on the provider as described in Web SSR. You cannot do this if your provider remounts, or you are using react-native-navigation
.import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context'; function App() { return <SafeAreaProvider initialMetrics={initialWindowMetrics}>...</SafeAreaProvider>; }
initialSafeAreaInsets
to inject values based on the device the user has, or simply pass zero. Otherwise, insets measurement will break rendering your page content since it is async.div { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-bottom: env(safe-area-inset-bottom); padding-right: env(safe-area-inset-right); }
useSafeAreaInsets()
can provide access to this information.import { useSafeAreaInsets } from 'react-native-safe-area-context'; function App() { const insets = useSafeAreaInsets(); return ( <View style={{ paddingTop: insets.top, paddingLeft: insets.left, paddingBottom: insets.bottom, paddingRight: insets.right, }} /> ); }