LogoCraftReactNative
Components

Switch

A switch component that allows users to toggle between two states. It displays as a button that can be toggled on or off, commonly used for enabling or disabling features. Based on the React Native Switch component.

Component preview

Installation

npx @craftreactnative/ui add Switch

Usage

Screen.tsx
import { Switch } from "@/craftrn-ui/components/Switch";
 
export const Screen = () => (
  <Switch value={value} onValueChange={(newValue) => console.log(newValue)} />
);

Props

Inherit all props from SwitchProps except trackColor, thumbColor, and style.

Dependencies

1 packages
react-native-unistyles

SliderDual

A slider component that allows users to select a range of values. It displays a horizontal bar with 2 sliding knobs that can be dragged to set the range.

Text

A text component that allows users to display text. Primary exist to style the text with the correct color and typography style defined in the theme.

On this page