LogoCraftReactNative
Components

BottomSheet

A bottom sheet is a UI component that slides up from the bottom of the screen to display additional content. It can be closed by swiping down or tapping the overlay.

Component preview

Usage

Screen.tsx
import { BottomSheet } from "@/craftrn-ui/components/BottomSheet";
 
export const Screen = () => (
  <BottomSheet
    visible={visible}
    maxHeight={300}
    onRequestClose={() => setVisible(false)}
  >
    <Text>Hello</Text>
  </BottomSheet>
);

Props

PropTypeDefault

On this page