# SafeAreaView is used to handle notches and safe areas

- **Pattern:** `ab-001961` (`mobile-ux-patterns.layout-safe-areas.safe-area-view`)
- **Severity:** critical
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001961
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001961)

## Why it matters

Without `SafeAreaProvider` and `SafeAreaView`, content renders underneath the iPhone notch, Dynamic Island, and home indicator — login buttons land under the status bar, close icons end up behind the camera cutout, and the first row of a list is clipped. This breaks the app on every iPhone from the X onward and most modern Androids. App Store reviewers flag notch collisions as a functional defect, not a visual polish issue.

## Severity rationale

Critical because core UI becomes unreachable on the majority of modern devices shipped in the last five years.

## Remediation

Install `react-native-safe-area-context`, mount `SafeAreaProvider` at the app root, and wrap every screen (including modals and bottom sheets) in `SafeAreaView` or read insets via `useSafeAreaInsets()`:

```tsx
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
export default function App() {
  return <SafeAreaProvider><SafeAreaView style={{ flex: 1 }}><Navigation /></SafeAreaView></SafeAreaProvider>;
}
```

Children rendered outside the tree — modals, sheets — need their own `SafeAreaView`.

## Detection

- **ID:** `safe-area-view`
- **Severity:** `critical`
- **What to look for:** Check whether `SafeAreaProvider` is present at the app root. Then enumerate all screen components and for each classify whether it uses `SafeAreaView`, `useSafeAreaInsets()`, or neither. Report: "X of Y screens handle safe areas."
- **Pass criteria:** The app root uses `SafeAreaProvider`, and all screen components use `SafeAreaView` or `useSafeAreaInsets()` to inset content away from notches and system UI areas. Report the count even on pass: "All N screens correctly handle safe area insets."
- **Fail criteria:** No SafeAreaView or SafeAreaProvider detected, or SafeAreaView is used inconsistently (fewer than 100% of screens). Do NOT pass when only the root layout has SafeAreaView but child screens render content outside it (e.g., modals, bottom sheets).
- **Skip (N/A) when:** The app targets only devices without notches and has no status bar overlap (very rare modern use case).
- **Detail on fail:** Quote the actual import (or lack thereof). `"No SafeAreaView detected in app layout. Content may be obscured by notches on iPhone 13+, Dynamic Island devices, or status bar on Android."` or `"SafeAreaProvider missing at root — insets not applied to any screens."`
- **Cross-reference:** For accessibility concerns related to content obscured by device UI, the Accessibility Fundamentals audit covers visible content requirements.
- **Remediation:** Install `react-native-safe-area-context` and wrap your app root:

  ```bash
  npm install react-native-safe-area-context
  ```

  ```tsx
  import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

  export default function App() {
    return (
      <SafeAreaProvider>
        <SafeAreaView style={{ flex: 1 }}>
          <Navigation />
        </SafeAreaView>
      </SafeAreaProvider>
    );
  }
  ```

  Or use `useSafeAreaInsets()` hook for custom layouts:

  ```tsx
  import { useSafeAreaInsets } from 'react-native-safe-area-context';

  function MyScreen() {
    const insets = useSafeAreaInsets();
    return <View style={{ paddingTop: insets.top }}>...</View>;
  }
  ```

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001961