Skip to main content
Version: v4

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​

ClassSupportComments
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 substituted for any spacing utility.
[n] can be substituted 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 substituted for any spacing utility.
[n] can be substituted 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