Safe Area Insets
Overview
Safe Area Insets are the area of the screen that is not covered by the notch, home indicator, or rounded corners. This is the area where you should place your content to ensure it is not obscured by the system UI.
Usage (native)
On native, the safe area measurements are provided by react-native-safe-area-context
. You will need to wrap your app with the SafeAreaProvider
and use the useSafeAreaEnv
hook to get the safe area insets.
import { View } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
export function MyApp(props) {
// Make sure you have the SafeAreaProvider at the root of your app
return (
<SafeAreaProvider>
<View className="p-safe" {...props} />
</SafeAreaProvider>
);
}
tip
Expo Router adds the <SafeAreaProvider /> to every route. This setup is not needed
Usage (web)
On web, your CSS StyleSheet will use the CSS env()
function and no extra setup is needed.
The h-screen-safe
and min-h-screen-safe
utilities may not work as expected on Google Chrome. Add height: -webkit-fill-available
on parent nodes:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
height: -webkit-fill-available;
}
body {
height: -webkit-fill-available;
}
#root {
height: -webkit-fill-available;
}
}
Compatibility
Class | Support | Comments |
---|---|---|
m-safe | ✅ Full Support |
|
p-safe | ✅ Full Support |
|
mx-safe | ✅ Full Support |
|
px-safe | ✅ Full Support |
|
my-safe | ✅ Full Support |
|
py-safe | ✅ Full Support |
|
mt-safe | ✅ Full Support |
|
pt-safe | ✅ Full Support |
|
mr-safe | ✅ Full Support |
|
pr-safe | ✅ Full Support |
|
mb-safe | ✅ Full Support |
|
pb-safe | ✅ Full Support |
|
ml-safe | ✅ Full Support |
|
pl-safe | ✅ Full Support |
|
*-safe-or-[n] | ✅ Full Support | * can be substituted for any spacing utility.[n] can be substituted for any spacing value.
|
h-screen-safe | 🌐 Web only |
|
*-safe-offset-[n] | 🌐 Web only | * can be substituted for any spacing utility.[n] can be substituted for any spacing value.
|