4153: Improve bottomSheet handle

[bahaaTuffaha]

Short Description

Improve the visibility and affordance of the bottom sheet by:

• increasing the size of the draggable area,
• increasing the default height of the bottom sheet on mobile,
• replacing the drag handle with an upward chevron,

Proposed Changes

Native:

• Replaced the grey pill Handle styling with a centered Pressable padded 16px vertically.
• Added an isFullscreen prop (default false) to flip the Chevron when the sheet reaches full screen.
• Bumped bottomSheetHandle.height from 40 to 56 .
• Labelled the Handle with accessibilityLabel={t('handle')}

Web:

• Changed bottomSheetHandleHeight from 40 to 56 and midSnapPercentage from 0.35 to 0.5
• Imported KeyboardArrowUpIcon and KeyboardArrowDownIcon from @mui/icons-material.
• Introduced an isFullscreen state after scrollElement and an updateFullscreen handler wired to onSpringEnd that flips it when the sheet's height reaches the max snap point.
• Reduced [data-rsbs-header] padding-top from 24px to 16px so the handle icon centers vertically.
• Added content: none to [data-rsbs-header]::before to hide the library's default handle.

Side Effects

N/A

Checklist

• Followed the contributing guidelines and conventions
• Considered accessibility impacts and made the necessary adjustments
• Added or updated unit tests (if applicable)
• Added or updated documentation (if applicable)
• Added a release note for native (if applicable)

Testing

• go to places and test the handle's interactivity.
• test the full screen behaviour.
• test contrast mode.

Resolved Issues

Fixes: #4153

---

[lunars97]

Thank you for effort! Looks almost perfect 😻 , on iOS the arrow looks not that noticeable I would say, maybe we could highlight it a little bit by setting a light background color or making the arrow bolder 💭 (or all together?). Currently is looks like this on iOS:

what do you think, @ulyanahoy-cloud , about it?

[bahaaTuffaha]

Thank you for effort! Looks almost perfect 😻 , on iOS the arrow looks not that noticeable I would say, maybe we could highlight it a little bit by setting a light background color or making the arrow bolder 💭 (or all together?). Currently is looks like this on iOS:

How about 32px size for the icon?

[lunars97]

Tested in iOS and now it looks better 👍 On web, I noticed, there is a previous handle as well...

[ulyanahoy-cloud]

My suggestion would be to add “In deiner Nähe” below the arrow and make the entire upper area tappable. The arrow itself should also be clickable and fully expand the bottom sheet. The main issue in the user test was that the draggable area was too small and therefore difficult to use.

[bahaaTuffaha]

• Moved the nearby heading out of the list into the sheet header on both platforms, hidden once a place is selected or while loading.
• Turned the chevron into a full-width button that toggles between the fullscreen and middle snap points, and widened it with scaleX(1.5).
• Reduced the web heading from variant='h3' to variant='h5' so the nearby text matches native's size.

2026-07-27.17-47-26.mov

And yes I tried to move the title of the selected place to behave like the nearby text but some titles are big that it will affect the size of the handle or by using ellipsis (...) that would hide part of the title so I abandoned that idea.

[ulyanahoy-cloud]

Looks really good! Maybe only the button animation could be a bit smoother, if that's possible.

[lunars97]

Looks almost perfect, just left some improvement suggestions 😻

[steffenkleinle]

❌ This useState is redunant:

Suggested change

	const [isFullscreen, setIsFullscreen] = useState(false)
	const isFullscreen = bottomSheetRef.current?.height ?? 0) >= max

[bahaaTuffaha]

it wont re-render the arrow when it reaches fullscreen 🤔

[lunars97]

Tested on real android device, ios simulator and chrome with safari with keyboard and screen-reader. Looks almost perfect, just left some suggestions 👍

[lunars97]

LGTM! Not tested again 👍