Scrollable content does not extend into unsafe areas

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.

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

<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.

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

  <SafeAreaView style={{ flex: 1 }}>
    <ScrollView contentInsetAdjustmentBehavior="automatic">
      {/* Content */}
    </ScrollView>
  </SafeAreaView>
  
  // Or with FlatList
  <FlatList
    data={items}
    renderItem={({ item }) => <Item />}
    contentInsetAdjustmentBehavior="automatic"
  />