A drag-to-expand panel, similar to the Map/Search in Yelp or DoorDash

How to / Third Party Tooling
1

Hi, I’m trying to implement a map/search layout similar to what is in Yelp or many other location-based hybrid map/search views (eg I checked all of the food related apps on my phone :slight_smile: McDonalds, Starbucks, DoorDash):

IMG_1697.PNG
IMG_1697.PNG1125×2436 441 KB

Specifically, I’m curious how to create that sort of draggable panel from the bottom, where you can drag it so that it overlaps the map.

Yelp/DoorDash technically have 3 states for this bottom panel: a completely collapsed state, an intermediate (default) state, and a completely expanded state, and you can even flick from completely collapsed to completely expanded.

2

Ahh, here’s an npm library that does this exact thing - GitHub - octopitus/rn-sliding-up-panel: Draggable sliding up panel implemented in React Native https://octopitus.github.io/rn-sliding-up-panel/ - found by just searching “Drag” on reactnative.directory - https://reactnative.directory/?search=drag

3

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.