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.

The useSafeAreaEnv() object should be added to the style prop of a View or any other cssInterop enabled component

The safe area class will only work on the component that has the useSafeAreaEnv styles, and any components within its render tree.

import { View } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { useSafeAreaEnv } from "nativewind";

export function MyApp(props) {
  // Make sure you have the SafeAreaProvider at the root of your app
  return (
    <SafeAreaProvider>
      <SafeAreaEnv {...props} />
    </SafeAreaProvider>
  );
}

function SafeAreaEnv() {
  // Add the safe area insets to the render tree
  return <View {...props} style={[style, useSafeAreaEnv()]} />;
}

// Now you can use the safe area className
export function MyComponent({ className, ...props }) {
  return <View className={`p-safe ${className}`} {...props} />;
}

tip

Expo Router adds the <SafeAreaProvider /> to every route. You only need to add useSafeAreaEnv() to your root layout.

import { View } from "react-native";
import { Slot } from "expo-router";
import { useSafeAreaEnv } from "nativewind";

export default function MyLayout() {
  return (
    // Add the safe area insets to the render tree
    <View {...props} style={[style, useSafeAreaEnv()]}>
      <Slot />
    </View>
  );
}

Usage (web)

On web, your CSS StyleSheet will use the CSS env() function and no extra setup is needed.

useSafeAreaEnv() returns undefined on web.

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	{ marginTop: env(safe-area-inset-top); marginBottom: env(safe-area-inset-bottom); marginLeft: env(safe-area-inset-left); marginRight: env(safe-area-inset-right); }
p-safe	✅ Full Support	{ paddingTop: env(safe-area-inset-top); paddingBottom: env(safe-area-inset-bottom); paddingLeft: env(safe-area-inset-left); paddingRight: env(safe-area-inset-right); }
mx-safe	✅ Full Support	{ marginLeft: env(safe-area-inset-left); marginRight: env(safe-area-inset-right); }
px-safe	✅ Full Support	{ paddingLeft: env(safe-area-inset-left); paddingRight: env(safe-area-inset-right); }
my-safe	✅ Full Support	{ marginTop: env(safe-area-inset-top); marginBottom: env(safe-area-inset-bottom); }
py-safe	✅ Full Support	{ paddingTop: env(safe-area-inset-top); paddingBottom: env(safe-area-inset-bottom); }
mt-safe	✅ Full Support	{ marginTop: env(safe-area-inset-top); }
pt-safe	✅ Full Support	{ paddingTop: env(safe-area-inset-top); }
mr-safe	✅ Full Support	{ marginRight: env(safe-area-inset-top); }
pr-safe	✅ Full Support	{ paddingRight: env(safe-area-inset-top); }
mb-safe	✅ Full Support	{ marginBottom: env(safe-area-inset-top); }
pb-safe	✅ Full Support	{ paddingBottom: env(safe-area-inset-top); }
ml-safe	✅ Full Support	{ marginLeft: env(safe-area-inset-top); }
pl-safe	✅ Full Support	{ paddingLeft: env(safe-area-inset-top); }
*-safe-or-[n]	✅ Full Support	* can be subsitued for any spacing utiltity. [n] can be subsitued for any spacing value. // example using mt .mt-safe-or-4 = { marginTop: max(env(safe-area-inset-top), 1rem); }
h-screen-safe	🌐 Web only	{ height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom))) }
*-safe-offset-[n]	🌐 Web only	* can be subsitued for any spacing utiltity. [n] can be subsitued for any spacing value. // example using mt .mt-safe-offset-4 = { marginTop: calc(env(safe-area-inset-top) + 1rem); }

Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only