Airbnb-Style Bottom Sheet in React Native: Map Meets List

Airbnb’s map-with-a-draggable-bottom-sheet is one of the most-copied patterns in mobile, because it elegantly solves browsing locations and a list at once. The short answer: build it from a free VP0 design in React Native with a performant bottom-sheet, define clear detents (a peek of results, a half view, and a full list), keep the drag buttery, and sync the sheet with the map. Learn the pattern, do not copy Airbnb’s brand. It is a gold standard for a reason, Airbnb has more than 7,000,000 active listings, and discovery is its core.

What makes the pattern work

The pattern balances two views that usually fight for space. The map stays full-screen behind the sheet, so users keep spatial context. The bottom sheet holds the list and snaps between detents: a small peek showing a result or two over the map, a half-height browse, and a full-height list. Dragging between them must feel physical and smooth, this gesture is the whole experience. And the two views stay in sync: panning the map updates the listings, and tapping a listing highlights it on the map. When detents, gesture, and sync are right, browsing feels effortless. Apple’s Human Interface Guidelines on sheets describe detents and the interaction.

Build it from a free design

VP0 is a free iOS design library for AI builders. Pick a map-and-sheet design, copy its link, and have Cursor or Claude Code rebuild it in React Native using a performant bottom-sheet (backed by the native gesture and reanimated systems) so the drag runs at a smooth frame rate. Define your detents explicitly, render the list efficiently (virtualize long lists), and wire the two-way sync: map region changes update results, list selection moves the map. Keep the peek state useful, the most relevant result should be visible without dragging. Use your own brand and content. For the ride-hailing cousin that uses the same idea, see Uber clone app UI kit free download, and for overall finish, see how to make my app look better.

Bottom-sheet pattern building blocks

Get each of these right.

Element	Job	Get it right
Full-screen map	Spatial context	Always behind the sheet
Detents	Snap points	Peek, half, full
Drag gesture	The whole feel	Smooth, physical, native
Map and list sync	Keep them aligned	Two-way, instant
Peek state	Useful at a glance	Show the top result

Common mistakes

The first mistake is a janky drag, the single thing that makes or breaks this pattern, so use the native gesture path. The second is copying Airbnb’s exact look instead of the pattern. The third is no map-list sync, so the two views drift apart. The fourth is a useless peek state that forces dragging to see anything. The fifth is an unvirtualized list that stutters when expanded. Smoothness and sync are everything.

A worked example

Say you build a stays-discovery app. From a VP0 design, the map fills the screen with a bottom sheet that peeks one listing, drags smoothly to a half browse, and snaps to a full list. Panning the map refreshes the listings; tapping a listing recenters the map. The drag runs on the native gesture path so it never stutters, and the long list is virtualized. Your brand is your own; only the pattern is borrowed. For a photo-feed pattern next, see Instagram clone React Native source code GitHub free, and for a related discovery feed, see Pinterest app design inspiration.

Key takeaways

• Airbnb’s pattern is a full map with a draggable bottom sheet of listings.
• Build it from a free VP0 design in React Native with a performant bottom-sheet.
• Define clear detents (peek, half, full) and keep the drag buttery smooth.
• Sync the map and list two-way, and make the peek state useful.
• Learn the pattern; do not copy Airbnb’s brand, and use it for any map-plus-list app.

Frequently asked questions

How do I build an Airbnb-style bottom sheet in React Native? Build it from a free VP0 design with a performant bottom-sheet library on the native gesture path, define detents (peek, half, full), and sync the sheet with a full-screen map two-way.

What are detents in a bottom sheet? Detents are the snap points the sheet rests at, typically a small peek, a half-height, and a full-height. They let the user smoothly trade map space for list space.

Why does the drag feel janky? Usually because the gesture is not running on the native, reanimated path. Use a bottom-sheet library backed by the native gesture system, and virtualize long lists, to keep it smooth.

Is this pattern only for Airbnb-style apps? No. Map-plus-list discovery suits real estate, restaurants, events, and ride apps. Learn the pattern and apply it broadly rather than cloning one brand.