SafeAreaView is used to handle notches and safe areas

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.

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():

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.

• ID: mobile-ux-patterns.layout-safe-areas.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:

  npm install react-native-safe-area-context
  

  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:

  import { useSafeAreaInsets } from 'react-native-safe-area-context';
  
  function MyScreen() {
    const insets = useSafeAreaInsets();
    return <View style={{ paddingTop: insets.top }}>...</View>;
  }