Skip to content

fix(ios): keep pages out of the safe area again - #1140

Open
R4M80MrX wants to merge 1 commit into
callstack:masterfrom
R4M80MrX:fix/ios-restore-ignore-safe-area
Open

fix(ios): keep pages out of the safe area again#1140
R4M80MrX wants to merge 1 commit into
callstack:masterfrom
R4M80MrX:fix/ios-restore-ignore-safe-area

Conversation

@R4M80MrX

@R4M80MrX R4M80MrX commented Sep 3, 2026

Copy link
Copy Markdown

Summary

#1085 dropped ignoreSafeArea: true from the hosting controller when it introduced propagateSafeArea(). Restoring it fixes pages being laid out inside the safe area on iOS, and does not undo what #1085 set out to fix.

The two mechanisms are independent:

With the flag gone, the convenience initialiser it used, UIHostingController(rootView:ignoreSafeArea:), and disableSafeArea() became dead code; nothing in the repo calls them on main today.

What it looks like

Measured on an iPhone 17 Pro Max simulator (iOS 26.5, 440×956pt, safe area top 62 / bottom 34), New Architecture, react-native-pager-view 9.0.4, React Native 0.86.3. The app places the pager above an 83pt React Native tab bar, so React Native lays the pager out at y 0..873.

I put coloured borders on the views and read their positions off a screenshot:

view React Native layout on screen, before on screen, after
PagerView itself 0 .. 873 0 .. 872.7 0 .. 872.7
its page container 0 .. 873 31.0 .. 810.7 0 .. 872.7

The pages lost ~93pt and sat 31pt low. Anything anchored to the bottom of a page — in this app a right-hand action rail and the author/caption row — was pushed off screen. onLayout inside a page still reported the full 873pt, so nothing on the JS side could compensate for it.

Relation to #1099

#1099 reports the same family of symptom on 8.0.4 and also points at #1085, but diagnoses a different mechanism: propagateSafeArea() sampling _UIHostingView<_ViewList_View>'s bottom inset mid-relayout, while it flickers 49 → 24.33, and pinning the transient value.

This change is not a fix for that sampling race, and I could not reproduce #1099's "corrects itself after the first scroll" behaviour — what I see is stable from the first render onwards. Zeroing the outer hosting view's insets may also remove an unstable source from the nearestNonZeroSafeAreaInsets() walk, but the view named in #1099 is an inner hosting view for the page list, which disableSafeArea() does not subclass. That part is worth a maintainer's eye.

Test Plan

What's required for testing (prerequisites)?

An iOS device or simulator with a home-indicator safe area, New Architecture, and a pager that is not itself inset — for example full-screen content behind a custom React Native tab bar.

What are the steps to reproduce (after prerequisites)?

  1. Render a <PagerView> filling a screen whose top and bottom reach into the safe area.
  2. Give a page content anchored to its bottom (position: 'absolute', bottom: 0).
  3. Before: the anchored content is off screen and the page sits low, while onLayout on the page reports the full height.
  4. After: the page matches React Native's layout exactly and the anchored content is visible.

Verified in the app this came from: the page container went from 31.0 .. 810.7 to 0 .. 872.7 with no other change. The diff is iOS-only, so Android is untouched.

Compatibility

OS Implemented
iOS
Android n/a

Checklist

  • I have tested this on a device and a simulator — simulator only (iPhone 17 Pro Max, iOS 26.5); not on physical hardware
  • I added the documentation in README.md — not applicable
  • I updated the typed files (TS and Flow) — not applicable

callstack#1085 dropped `ignoreSafeArea: true` from the hosting controller when it added
`propagateSafeArea()`. The two solve different problems: the flag keeps SwiftUI
from laying the pages out inside the safe area, while `propagateSafeArea()`
hands child UIKit views their insets back. With the flag gone, `PagerView`'s
`GeometryReader` is measured inside the safe area and every page is framed to
that measurement, so the pages shrink and shift while React Native's layout
still has them at full size.

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant