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
visible
boolean
-
onRequestClose
() => void
-
onClose?
() => void
-
children
ReactElement<unknown, string | JSXElementConstructor<any>>
-
maxHeight?
number
-
enableSwipeToClose?
boolean
false
enableOverlayTapToClose?
boolean
false

Avatar

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.

On this page