fix(ios): keep pages out of the safe area again - #1140
Open
R4M80MrX wants to merge 1 commit into
Open
Conversation
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
#1085 dropped
ignoreSafeArea: truefrom the hosting controller when it introducedpropagateSafeArea(). 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:
ignoreSafeArea: true(disableSafeArea()) keeps SwiftUI from shrinking and shifting the pages.PagerView'sGeometryReaderis measured inside the hosting view and each page is framed toproxy.size, so a hosting view that carries a safe area produces pages inset by it.propagateSafeArea()onPageChildViewControllergives child UIKit views their insets back — the problem fix(ios): propagate safe area insets to child UIKit views inside PagerView #1085 was written for ([iOS] New Arch: safe area insets are stripped from PagerView children #1090, [iOS] v8 (SwiftUI TabView): pages shrink when the keyboard appears — real devices only #1096).With the flag gone, the convenience initialiser it used,
UIHostingController(rootView:ignoreSafeArea:), anddisableSafeArea()became dead code; nothing in the repo calls them onmaintoday.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-view9.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 y0..873.I put coloured borders on the views and read their positions off a screenshot:
PagerViewitself0 .. 8730 .. 872.7✅0 .. 872.7✅0 .. 87331.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.
onLayoutinside 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, whichdisableSafeArea()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)?
<PagerView>filling a screen whose top and bottom reach into the safe area.position: 'absolute', bottom: 0).onLayouton the page reports the full height.Verified in the app this came from: the page container went from
31.0 .. 810.7to0 .. 872.7with no other change. The diff is iOS-only, so Android is untouched.Compatibility
Checklist
README.md— not applicable