fix: make nested SafeAreaProvider report its own frame and insets on web#737
Draft
janicduplessis wants to merge 2 commits into
Draft
fix: make nested SafeAreaProvider report its own frame and insets on web#737janicduplessis wants to merge 2 commits into
janicduplessis wants to merge 2 commits into
Conversation
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
Fixes #713
On web,
NativeSafeAreaProvideralways reported window-level values: insets from the hiddenenv(safe-area-inset-*)measurement element and the frame asdocument.documentElementdimensions, no matter where the provider is rendered. NestedSafeAreaProviders therefore returned root window metrics fromuseSafeAreaFrame/useSafeAreaInsets, unlike iOS/Android where each provider reports its own view's frame and insets.The provider now measures its wrapper element with
getBoundingClientRect()(on react-native-web theViewref is the underlying DOM element):env()insets clamped to the part of the safe area overlapping the element:max(0, windowInset - distanceFromThatEdge)ResizeObserverre-measures when the element resizes, and a capture-phase windowscrolllistener re-measures when an ancestor scroll moves itResizeObserversupport) it keeps the previous window-level behavior. The hidden-elementenv()transition mechanism is unchanged as the window-level inset source.Known limitation: a layout shift that moves the provider without resizing it and without scrolling (e.g. a sibling collapsing above it) won't re-report until the next resize/scroll/env() change.
Adds
jest-environment-jsdomas a devDependency for the new tests.Test Plan
New jsdom tests in
src/__tests__/NativeSafeAreaProviderWeb-test.tsxrender the web provider with react-dom and stubgetBoundingClientRect,getComputedStyleandResizeObserver:ResizeObserverit falls back to window metricsRan with
yarn validate:jest(all suites pass), plus prettier/eslint/tsc.