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.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.
SafeAreaProvider
in your app root component:import { SafeAreaProvider } from 'react-native-safe-area-context'; function App() { return <SafeAreaProvider>...</SafeAreaProvider>; }
import { useSafeArea } from 'react-native-safe-area-context'; function HookComponent() { const insets = useSafeArea(); return <View style={{ paddingTop: insets.top }} />; }
import { SafeAreaConsumer } from 'react-native-safe-area-context'; class ClassComponent extends React.Component { render() { return ( <SafeAreaConsumer>{insets => <View style={{ paddingTop: insets.top }} />}</SafeAreaConsumer> ); } }
styles.css
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); }
useSafeArea()
can provide access to this information.App.js
import { useSafeArea } from 'react-native-safe-area-context'; function App() { const insets = useSafeArea(); return ( <View style={{ paddingTop: insets.top, paddingLeft: insets.left, paddingBottom: insets.bottom, paddingRight: insets.right, }} /> ); }
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.initialWindowSafeAreaInsets
from this package and set it as the initialSafeAreaInsets
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, initialWindowSafeAreaInsets } from 'react-native-safe-area-context'; function App() { return ( <SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}>...</SafeAreaProvider> ); }