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>
  );
}

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

m-safe

p-safe

mx-safe

px-safe

my-safe

py-safe

mt-safe

pt-safe

mr-safe

pr-safe

mb-safe

pb-safe

ml-safe

pl-safe

*-safe-or-[n]

h-screen-safe

*-safe-offset-[n]