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

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-05-31, updated 2026-06-02. 4 min read.
> Source: https://vp0.com/blogs/airbnb-style-bottom-sheet-react-native

The magic is the drag: a sheet that glides from a peek of listings to a full list, with the map always alive behind it.

**TL;DR.** Airbnb's signature pattern is a full map with a draggable bottom sheet of listings that snaps between detents (peek, half, full). Build it from a free VP0 design in React Native with a performant bottom-sheet library, define clear detents, keep the gesture buttery, and sync the sheet with the map (pan the map, update the list). Learn the pattern, not the brand, and use it for any map-plus-list discovery app.

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](https://www.statista.com/) 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](https://developer.apple.com/design/human-interface-guidelines/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](https://reactnative.dev/) 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](/blogs/uber-clone-app-ui-kit-free-download/), and for overall finish, see [how to make my app look better](/blogs/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](/blogs/instagram-clone-react-native-source-code-github-free/), and for a related discovery feed, see [Pinterest app design inspiration](/blogs/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.

## 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.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*