refactor!: derive auto detent from container's yoga layout#745
Closed
lodev09 wants to merge 2 commits into
Closed
Conversation
The container is now a plain flex column (header, content, footer) whose natural height IS the auto detent — floating (absolute) header/footer are excluded by yoga itself, no more header/content height summing. - Footer is in-flow by default (content flex pushes it to the bottom); float via footerStyle. Pinned scrollables shrink to make room for it - Container gets a custom shadow node/state: fills the sheet when a ScrollView is pinned, sizes naturally otherwise - autoHeight = container height + pinned ScrollView content delta, measured on the container (headerHeight/contentHeight plumbing removed) - Peek derives from the container-relative peek extent + footer height - Android footer keyboard shift is now a pure translation (parity w/ iOS) - Skip detent invalidation when detents are all fractional
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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
The container is now a plain yoga flex column (header, content, footer) whose natural height is the
autodetent — replacing thecontentHeight + headerHeightsumming on all platforms. Yoga itself decides what counts: in-flow header/footer take layout space and count; floating (position: 'absolute') ones overlay and don't. Full layout parity with hand-rolled views — theheader/footerprops are now purely behavior slots (edge effects, keyboard handling, a11y).Breaking changes
flex: 1pushes it to the sheet's bottom edge) instead of overlaying it, counts towardauto, and pinned scrollables shrink to make room for it (no more manualpaddingBottomcompensation). Float it viafooterStyle(position: 'absolute') to restore the overlay behavior.auto/peekheights — previously aheaderStylewithposition: 'absolute'still added its height to the auto detent, which was visually incorrect.autodetents the container is content-sized, so floated children pin to the content's box — the same thing a hand-rolled absolute view would do.Implementation
TrueSheetContainerViewgets a custom shadow node/state (interfaceOnly): sizes naturally forauto, fills the sheet when a ScrollView is pinned (mirrors the content's bounded state via delegate)autoHeight = container height + pinned ScrollView content delta, measured on the container — one formula, valid in both regimes;headerHeight/contentHeightplumbing deleted everywherepeekderives from the container-relative peek extent + footer height; without aTrueSheetPeekit falls back to the content's layout offset (collapse-to-header preserved)positionFooterreduced from per-frame y-pinning to a pure keyboardtranslationYslide (parity with iOS) — yoga owns the footer's frame nowdetachedSiblingsfloat; vaul's auto-size wrapper is nowposition: relativeso floated children get native-equivalent containing-block semanticsType of Change
Test Plan
yarn typecheck,yarn lint,yarn test(44 passing), objc/ktlint cleanTrueSheetPeek, footer keyboard slide, drag trackingScreenshots / Videos
Checklist
🤖 Generated with Claude Code