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.

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>
);

An avatar component displaying a user's profile picture or initials. It supports different sizes and can be customized with a color. It also supports showing a green dot to indicate the user is online.

Button

A button component that supports different sizes and variants. It can be used for primary actions, secondary actions, or negative/destructive actions.

BottomSheet

Usage

Props

On this page