Skip to content

fix(iOS) - Prevent SwiftUI based filter from insetting content by the safe area - #58349

Open
intergalacticspacehighway wants to merge 1 commit into
react:mainfrom
intergalacticspacehighway:fix/swiftui-filter-safe-area-regions
Open

fix(iOS) - Prevent SwiftUI based filter from insetting content by the safe area#58349
intergalacticspacehighway wants to merge 1 commit into
react:mainfrom
intergalacticspacehighway:fix/swiftui-filter-safe-area-regions

Conversation

@intergalacticspacehighway

Copy link
Copy Markdown
Contributor

Summary:

When a filter style is passed to a View, it can shift the View by safe area insets if it overlaps a safe area edge. Filter style should not affect layout. Also fixes - #57642

Unset safeAreaRegions on the hosting controller to opt out of implicit safe area insets. Below iOS 16.4 safeAreaRegions does not exist so it requires Obj-C swizzling hack as noted here - #57643. Hence, proper fix requires gating the filter feature to iOS 16.4. We can mention it in the documentation on release.

Changelog:

[IOS] [FIXED] - Fix views with a filter having their content offset by the safe area insets

Test Plan:

  • Set releaseLevel to canary.
  • Render <View style={{width: 100, height: 100, backgroundColor:"red", filter:[{blur: 10}]}} /> in RNTester, make sure it renders on top of the screen.
  • View renders as expected on first mount.
  • Change height or width, it will shift the view by safe area inset. It requires layout update because RCTMountingManager calls finalizeUpdates before calling mountChildComponentView, so on first mount the hosting view has no window and its safe area insets are zero.
Before After
Filtered content pushed down by the top safe area inset Filtered content aligned with the view bounds
Content is offset down and shrunk by the top inset Content fills the view

cc - @jorge-cab

UIHostingController insets its root view by the safe area, so a filtered view
had its content moved down and shrunk whenever the view overlapped a safe area
edge. A filter must not affect layout.

Set `safeAreaRegions = []` on the hosting controller to opt out, and gate the
SwiftUI filter container at iOS 16.4, the first version where that property
exists. Below 16.4 the filters that need the container stay no-ops, which
matches the behavior before `enableSwiftUIBasedFilters` existed.

`safeAreaRegions` is declared `@available(iOS 16.4, tvOS 16.4, *)`, so both
checks name tvOS. Without the tvOS clause the Swift file fails to build for
tvOS.
@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 4, 2026
@facebook-github-tools facebook-github-tools Bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Sep 4, 2026
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. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant