title: Bottom sheet

Bottom sheet

Sheet-style modal that slides up from the bottom. Templates use either NativeWindUI's <Sheet> primitive or @gorhom/bottom-sheet.

Expo Router modal approach

// app/_layout.tsx
<Stack>
  <Stack.Screen name="cart" options={{ presentation: "modal" }} />
</Stack>

// app/cart.tsx
export default function CartModal() {
  return <View className="flex-1 bg-background p-6">...</View>;
}

Navigate with router.push('/cart') — Expo Router animates it as a sheet.

@gorhom/bottom-sheet approach

import BottomSheet from "@gorhom/bottom-sheet";

<BottomSheet snapPoints={["25%", "50%", "90%"]}>
  <View className="p-6">...</View>
</BottomSheet>

Use Expo Router modals for full-screen interactions; @gorhom/bottom-sheet for in-place sheets that stay mounted.