LogoCraftReactNative
Components

Button

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

Dependencies

1 packages
react-native-unistyles
Required imports
craftrn-ui/components/Text
Component preview

Usage

Screen.tsx
import { Button } from "@/craftrn-ui/components/Button";
 
export const Screen = () => (
  <Button onPress={() => {}} size="small" variant="secondary">
    Press me
  </Button>
);

Props

PropTypeDefault
onPress?
() => void
-
disabled?
boolean
false
renderContent
(props: { iconSize: number; iconColor: string; }) => ReactElement<unknown, string | JSXElementConstructor<any>>
-
size?
Size
'medium'
variant?
"default" | "accent" | "reversed"
'default'
intent?
Intent
'primary'

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.

ButtonRound

A circular button component designed for displaying an icon. Commonly used for navigation actions or action buttons.

On this page