Mobile Safe Area Calculator

The safe area is the region of the screen that is not obscured by the device's notch, Dynamic Island, home indicator, status bar, or camera cutout. Content placed inside the safe area is guaranteed to be visible and interactive on all device sizes. On iPhone 14 Pro and newer, the Dynamic Island at the top reduces the usable safe area.

Use the react-native-safe-area-context library. Wrap your app in <SafeAreaProvider>, then use <SafeAreaView> as your root view, or use the useSafeAreaInsets() hook for precise control. Never use StatusBar.currentHeight directly in production — it doesn't account for all device variations. react-native-safe-area-context is included in Expo by default.

SafeAreaView automatically applies padding based on the safe area insets as a View wrapper — use it for full-screen pages. useSafeAreaInsets() gives you the raw inset values (top, bottom, left, right) as numbers, so you can apply them selectively — useful for positioning floating elements, FABs, tab bars, or content that needs partial safe area handling.

On Face ID iPhones (iPhone X and later), there's a 34pt home indicator at the bottom. Use useSafeAreaInsets().bottom to get this value (typically 34). Add it to your tab bar or bottom navigation padding. On Android, this varies — some devices have gesture navigation bars, others have physical buttons. react-native-safe-area-context handles both automatically.

Android devices with punch-hole cameras or notches define a display cutout area. Since Android 9 (API 28), apps can handle this with WindowInsets. React Native's react-native-safe-area-context reads the WindowInsets API to provide accurate inset values on all Android devices with cutouts. For older Android versions or edge cases, provide fallback padding values.