Beta modeInstall commands on this page use
lovdacn@beta, which installs from the beta registry and may change before the stable release.What’s in betaLoading preview…
Bottom Sheet is in beta. This component was recently added and will be stabled soon.
Installation
npx lovdacn@latest add bottom-sheet(You can also use the shortened lvcn alias, e.g., npx lvcn@latest add bottom-sheet)
Registry dependencies: icon, text, utils, native-only-animated-view
Usage
import { BottomSheet, BottomSheetContent, BottomSheetDescription, BottomSheetHeader, BottomSheetTitle, BottomSheetTrigger } from "@/components/ui/bottom-sheet"
import { Button, Text } from "react-native"
export function Example() {
return (
<BottomSheet>
<BottomSheetTrigger asChild>
<Button title="Open Bottom Sheet" />
</BottomSheetTrigger>
<BottomSheetContent>
<BottomSheetHeader>
<BottomSheetTitle>Bottom Sheet Menu</BottomSheetTitle>
<BottomSheetDescription>
This slides up from the bottom of the screen.
</BottomSheetDescription>
</BottomSheetHeader>
</BottomSheetContent>
</BottomSheet>
)
}