feat(bottom-sheet): opt-in floating variant#919
Draft
CassioMG wants to merge 7 commits into
Draft
Conversation
Declare and forward the forwardRef ref param onto the host View so React does not warn about a one-arg render function; keeps test output pristine. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
A floating card's absolutely-positioned scroll footer sits over the rounded bottom edge; round and clip its bottom corners when floating so an opaque footer background does not square off the card. Adds tests for the footer rounding in both floating and classic modes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adopt the floating variant on the scrollable transaction-details sheet. The footer drops its redundant safe-area bottom padding when floating, since the card's bottom inset already clears the safe area. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adopt the floating variant on the fixed-snap manage-wallets sheet. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adopt the floating variant on the transaction-details sheet in both the swap and dApp-signing flows. These are fixed-snap sheets whose scroll content is sized by BottomSheetAdaptiveContainer. gorhom reduces a modal sheet's container height by its insets, so a floating sheet's card is shorter than the raw window; calculateScrollableMaxHeight gains a reservedVerticalPx option and the container reserves the floating bottom inset (plus the header gap) so scroll content fits the card instead of overflowing its rounded bottom. Known limitation: gorhom does not round-clip content for detached sheets (the rounded corners are a background layer only) and its content view is absolutely positioned, so the scroll content's bottom corners remain square against the rounded card. Accepted for now. Shared the floating margin/radius constants via config/constants. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
CassioMG
changed the title
Contributor
|
iOS Simulator preview build is ready: https://github.com/stellar/freighter-mobile/releases/tag/untagged-7fe2159ba067dec077f7 (SDF collaborators only — install instructions in the release description) |
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
Adds an opt-in floating variant to the shared
BottomSheetwrapper (@gorhom/bottom-sheetv5) — a detached card with small transparent margins on the sides and bottom, all four corners rounded, and no drag handle — and adopts it on several experimental sheets.The variant is opt-in via a new
floatingprop (defaultfalse), so all existing (~52) sheets render exactly as before.How it works
When
floatingis set, the wrapper uses gorhom's native detached mode:detached+bottomInset = insets.bottom + 8(lifts the card off the bottom, safe on devices without a home indicator)style={{ marginHorizontal: 8 }}(side gaps)backgroundStyle.borderRadius = 32(all-corner rounding)handleComponent={null}(no drag pill — dismiss via the X button / backdrop tap)Sheets adopted
Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-07-02.at.21.13.18.mov
Known limitation
On the fixed-snap Sign-transaction-details sheet, the scroll content's bottom corners stay square against the rounded card. gorhom doesn't round-clip content for detached sheets (the rounded corners are a background layer only) and its content view is absolutely positioned, so masking the scroll content to the rounded bottom isn't straightforward. Content fits and scrolls correctly; only the corner mask is missing. Left as a follow-up.
Testing
reservedVerticalPxheight math.🤖 Generated with Claude Code