Skip to content

Hide misplaced iOS 26 scroll edge effects on inverted lists (#58684) - #58684

Open
crazeface wants to merge 1 commit into
react:mainfrom
crazeface:export-D120641422
Open

crazeface wants to merge 1 commit into
react:mainfrom
crazeface:export-D120641422

Conversation

@crazeface

@crazeface crazeface commented Sep 25, 2026 •

Copy link
Copy Markdown

Summary:

iOS 26 adds scroll edge effects, which UIKit positions in a scroll view's own coordinate space. Inverted virtualized lists are implemented with a scaleY(-1) transform on the scroll view, and UIKit does not account for it, so neither effect lands where it belongs:

  • Against a navigation bar, topEdgeEffect darkens the lower half of the screen instead of the content passing under the bar.
  • Against a bottom bar, bottomEdgeEffect dims the entire screen.

With both bars present the two stack, leaving content close to unreadable.

This reproduces with a plain UIScrollView carrying the same transform, with no React Native involved, so the underlying defect is in UIKit rather than here. What can be done from this side is stop the misplaced effects from rendering, so RCTEnhancedScrollView now hides both while the scroll view is inverted.

Nothing visible is lost by doing so. An inverted list never gets a usable edge effect at any scroll position; the only thing the effects produce while mirrored is the misplaced darkening. Giving the bars correct effects is not possible from here, because UIKit has no notion of the transform.

Reported as react-native#54181, migrated from software-mansion/react-native-screens#3293.

Changelog:
[iOS][Fixed] - Hide the misplaced iOS 26 scroll edge effects on inverted ScrollViews

Differential Revision: D120641422

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 25, 2026
@meta-codesync

meta-codesync Bot commented Sep 25, 2026

Copy link
Copy Markdown

@crazeface has exported this pull request. If you are a Meta employee, you can view the originating Diff in D120641422.

@cortinico cortinico left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review automatically exported from Phabricator review in Meta.

@meta-codesync meta-codesync Bot changed the title Hide misplaced iOS 26 scroll edge effects on inverted lists Hide misplaced iOS 26 scroll edge effects on inverted lists (#58684) Sep 25, 2026
crazeface pushed a commit to crazeface/react-native that referenced this pull request Sep 25, 2026
)

Summary:

iOS 26 adds scroll edge effects, which UIKit positions in a scroll view's own coordinate space. Inverted virtualized lists are implemented with a `scaleY(-1)` transform on the scroll view, and UIKit does not account for it, so neither effect lands where it belongs:

- Against a navigation bar, `topEdgeEffect` darkens the lower half of the screen instead of the content passing under the bar.
- Against a bottom bar, `bottomEdgeEffect` dims the entire screen.

With both bars present the two stack, leaving content close to unreadable.

This reproduces with a plain `UIScrollView` carrying the same transform, with no React Native involved, so the underlying defect is in UIKit rather than here. What can be done from this side is stop the misplaced effects from rendering, so `RCTEnhancedScrollView` now hides both while the scroll view is inverted.

Nothing visible is lost by doing so. An inverted list never gets a usable edge effect at any scroll position; the only thing the effects produce while mirrored is the misplaced darkening. Giving the bars correct effects is not possible from here, because UIKit has no notion of the transform.

Reported as react-native#54181, migrated from software-mansion/react-native-screens#3293.

Changelog:
[iOS][Fixed] - Hide the misplaced iOS 26 scroll edge effects on inverted ScrollViews

Differential Revision: D120641422
)

Summary:
Pull Request resolved: react#58684

iOS 26 adds scroll edge effects, which UIKit positions in a scroll view's own coordinate space. Inverted virtualized lists are implemented with a `scaleY(-1)` transform on the scroll view, and UIKit does not account for it, so neither effect lands where it belongs:

- Against a navigation bar, `topEdgeEffect` darkens the lower half of the screen instead of the content passing under the bar.
- Against a bottom bar, `bottomEdgeEffect` dims the entire screen.

With both bars present the two stack, leaving content close to unreadable.

This reproduces with a plain `UIScrollView` carrying the same transform, with no React Native involved, so the underlying defect is in UIKit rather than here. What can be done from this side is stop the misplaced effects from rendering, so `RCTEnhancedScrollView` now hides both while the scroll view is inverted.

Nothing visible is lost by doing so. An inverted list never gets a usable edge effect at any scroll position; the only thing the effects produce while mirrored is the misplaced darkening. Giving the bars correct effects is not possible from here, because UIKit has no notion of the transform.

Reported as react-native#54181, migrated from software-mansion/react-native-screens#3293.

Changelog:
[iOS][Fixed] - Hide the misplaced iOS 26 scroll edge effects on inverted ScrollViews

Differential Revision: D120641422

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. meta-exported p: Facebook Partner: Facebook Partner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants