How to create airbnb search result bottom-sheet effect?

[ivanyufen]

WhatsApp.Video.2026-03-16.at.20.51.30.mp4

I wanna create a similar modal for my list, where the modal can't be minimized to lower snap point until the scrollable item inside is at the very top / first item. Try this approach with AI/custom made, gorhom/bottom-sheet, but still not working as expected. Anyone have any idea how to create something like this? the scrollable item inside will be using flashlist or legend list. thanks!

[doanhtu07]

I've created a new sheet library. Feel free to check it here: https://github.com/doanhtu07/react-native-the-sheet

I haven't supported FlashList or LegendList yet, but you can create one yourself using the pan gesture similar to how I did in my BottomSheetFlatList

That said, I believe gorhom bottom sheet should have already supported what you want through its scroll view component. This is just a pan gesture problem. Not sure why it didn't work for you

[kinthaiofficial]

The Airbnb search-result bottom sheet effect (map behind, draggable list of results in front) is a classic pattern. Here's how to achieve it with react-native-bottom-sheet:

Core setup:

const snapPoints = useMemo(() => ['15%', '50%', '90%'], []);

return (
  <View style={{ flex: 1 }}>
    {/* Map stays full screen behind */}
    <MapView style={StyleSheet.absoluteFill} />
    
    <BottomSheet
      index={1}                    // start at 50%
      snapPoints={snapPoints}
      enablePanDownToClose={false} // always visible
      backgroundStyle={{ borderRadius: 24 }}
    >
      <BottomSheetFlatList
        data={results}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <ResultCard item={item} />}
        contentContainerStyle={{ paddingBottom: 80 }}
      />
    </BottomSheet>
  </View>
);

Key details:

• Use BottomSheetFlatList (not regular FlatList) inside the sheet — it handles scroll vs drag disambiguation correctly
• The map should respond to bottom sheet position: use useBottomSheetSpringConfigs or useAnimatedValue to update the map's visible region as the sheet animates
• For the "map pans as you scroll list" effect: wire onViewableItemsChanged to MapView.animateToRegion()

The tricky part — scroll lock:
When the sheet is at max height, inner scrollable should scroll. When sheet is not at max, drag should move the sheet. BottomSheetFlatList handles this automatically, but if you need custom scroll behavior, look at activeOffsetY in the gesture config.

Are you trying to sync map viewport with selected items, or just the basic layout?