# Scrollable content does not extend into unsafe areas

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

## Why it matters

Scrollable content without safe-area insets disappears under the notch, status bar, and home indicator during scroll — the top row of a feed vanishes behind the Dynamic Island, and the bottom action bar slides under the home indicator where it cannot be tapped. Users perceive this as content loss, not a styling bug, and the bottom home indicator collision is specifically called out in the Apple HIG as a reviewer-blocking issue.

## Severity rationale

Medium because scrollable overlap degrades readability but the rest of the screen still functions.

## Remediation

Wrap every `ScrollView` and `FlatList` in `SafeAreaView`, or set `contentInsetAdjustmentBehavior="automatic"` so the system manages top and bottom insets:

```tsx
<SafeAreaView style={{ flex: 1 }}>
  <ScrollView contentInsetAdjustmentBehavior="automatic">{/* content */}</ScrollView>
</SafeAreaView>
```

For lists fixed to the screen edge, prefer `contentInsetAdjustmentBehavior` over `SafeAreaView` so the scroll indicator still reaches the edge.

## Detection

- **ID:** `scroll-safe-area`
- **Severity:** `medium`
- **What to look for:** Count all ScrollView and FlatList components. For each, check whether `contentInsetAdjustmentBehavior` is set or whether the component is wrapped in `SafeAreaView`. Verify content insets prevent scrolling under status bar, notch, or bottom home indicator.
- **Pass criteria:** At least 100% of scrollable containers have insets applied via `contentInsetAdjustmentBehavior="automatic"` or SafeAreaView wrapping. Content does not scroll under notches, status bar, or home indicator.
- **Fail criteria:** Any scrollable content scrolls under notches or system UI, or scrollable area extends into unsafe regions without insets.
- **Skip (N/A) when:** The app has no scrollable content (no ScrollView, FlatList, or SectionList components).
- **Detail on fail:** Quote the specific component missing insets. `"ScrollView content scrolls under the iOS notch without inset adjustment."` or `"FlatList extends below the home indicator area on iPhone."`
- **Remediation:** Use SafeAreaView to wrap scrollable content, or apply contentInsetAdjustmentBehavior:

  ```tsx
  <SafeAreaView style={{ flex: 1 }}>
    <ScrollView contentInsetAdjustmentBehavior="automatic">
      {/* Content */}
    </ScrollView>
  </SafeAreaView>

  // Or with FlatList
  <FlatList
    data={items}
    renderItem={({ item }) => <Item />}
    contentInsetAdjustmentBehavior="automatic"
  />
  ```

Taxons: user-experience

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