fix extra space at bottom of sheet on android - #536
Open
ovdlinden wants to merge 1 commit into
Open
Conversation
On android the modal window is first measured without the navigation bar area and re-measured at full height once window insets are applied. The sheet wrapper follows the new container height, but translateY was only recomputed from the sheet content's onLayout, which does not re-fire when the content size is unchanged. The sheet then stays anchored to the stale container bottom, floating above the screen bottom by exactly the navigation bar inset. Reposition the sheet whenever the root container is measured with a new size, so translateY always matches the rendered container height.
|
Someone is attempting to deploy a commit to the Ammar Ahmed's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Tested and it fixes the issue for me, thank you! 🙏 |
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.
Fixes #497
On Android with the navigation bar visible, the sheet sometimes opens with a band of empty space below its content. The gap matches the height of the navigation bar.
What happens
The sheet's position depends on two values staying in sync: the measured height of the root container (stored in
dimensionsstate, which also sets the height of the bottom-anchored wrapper) andtranslateY, which is computed from that height when the sheet content lays out.On Android the modal window is measured twice. It first comes up without the navigation bar area (2208px on my test device), then the system applies the window insets and the container is measured again at full height (2340px). The second measurement updates
dimensionsand moves the wrapper, buttranslateYis only recomputed from the sheet content's ownonLayout, and that never re-fires when the content size is unchanged. The sheet stays anchored to the old bottom edge, floating above the screen bottom by the nav bar height, with the wrapper's background filling the gap below.Whether you see it depends on timing, which is why reports in the thread disagree about first vs. later opens. When
insets.bottomarrives late (noinitialMetricsonSafeAreaProvider), the growing bottom padding forces a content re-layout and the first open self-corrects, but every open after that shows the gap. Sheets tall enough to hitmaxHeightalways re-layout and never show it. Small sheets with cached insets show it every time.The fix
The root container's
onLayouthandler now re-runs the positioning math whenever the container is measured with a new size, sotranslateYalways matches the height the wrapper is rendered with.dimensionsRefis updated synchronously before repositioning because the recompute reads it.I went this way instead of the
Dimensions.get('window')patches from the thread because the window size isn't always the container size: split-screen, foldables andbackgroundInteractionEnabledsheets all break that assumption. This keeps the sheet anchored to whatever its container actually is. It also fixes the variant where the sheet only positions correctly on the second attempt: if the content happens to be measured before the container, positioning now runs as soon as the container reports its size instead of waiting for a content re-layout that may never come.How I tested it
Pixel 4a emulator, Android 16 (API 37), 3-button navigation, RN 0.81, using the
return-datasheet from the example app. Before the fix, the second open floated 136px above the screen bottom (Cancel button at y 1908–2046 instead of 2044–2182, nav bar top at 2208). After the fix, first and second open land on identical positions, flush with the container bottom.tscpasses.