CraftReactNativeCraftReactNative
Components

Skeleton

An animated skeleton component for loading states. Provides a smooth pulsing animation to indicate content is being loaded.

Installation

npx @craftreactnative/ui add Skeleton

Usage

Screen.tsx
import { Skeleton } from '@/craftrn-ui/components/Skeleton';
 
export const Screen = () => (
  <View>
    <Skeleton width="100%" height={20} borderRadius={8} />
    <Skeleton width="60%" height={16} borderRadius={4} style={{ marginTop: 8 }} />
    <Skeleton width={40} height={40} borderRadius={20} style={{ marginTop: 8 }} />
  </View>
);

Props

PropTypeDefault
style
ViewProps
-
width?
any
'100%'
height?
any
20
borderRadius?
number
4
color?
string
theme.colors.backgroundNeutral

Dependencies

2 packages
react-native-reanimated
react-native-unistyles

Radio

A radio button component that allows users to select a single option from a set of choices. It displays as a circular button that can be either checked or unchecked.

Slider

A slider component that allows users to select a value from a range. It displays a horizontal bar with a sliding knob that can be dragged to set the value.

On this page