Skip to content

fix extra space at bottom of sheet on android - #536

Open
ovdlinden wants to merge 1 commit into
ammarahm-ed:masterfrom
ovdlinden:fix/497-android-bottom-gap
Open

fix extra space at bottom of sheet on android#536
ovdlinden wants to merge 1 commit into
ammarahm-ed:masterfrom
ovdlinden:fix/497-android-bottom-gap

Conversation

@ovdlinden

Copy link
Copy Markdown

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.

Bug Fixed

What happens

The sheet's position depends on two values staying in sync: the measured height of the root container (stored in dimensions state, which also sets the height of the bottom-anchored wrapper) and translateY, 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 dimensions and moves the wrapper, but translateY is only recomputed from the sheet content's own onLayout, 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.bottom arrives late (no initialMetrics on SafeAreaProvider), 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 hit maxHeight always re-layout and never show it. Small sheets with cached insets show it every time.

The fix

The root container's onLayout handler now re-runs the positioning math whenever the container is measured with a new size, so translateY always matches the height the wrapper is rendered with. dimensionsRef is 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 and backgroundInteractionEnabled sheets 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-data sheet 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. tsc passes.

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.
@vercel

vercel Bot commented Jul 2, 2026

Copy link
Copy Markdown

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.

@mikekreeki

Copy link
Copy Markdown

Tested and it fixes the issue for me, thank you! 🙏

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Random extra space appears at bottom of ActionSheet

2 participants