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