Spinner

Loading indicator component with size and variant options.

iOSAndroid

Preview Spinner on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-spinner

Required Packages(2 packages)

pnpm add react-native-reanimated react-native-svg

import { Spinner } from '@/components/docyrus-native/spinner';

<Spinner />
<Spinner size="lg" variant="primary" />
<Spinner color="#ff0000" />

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Spinner size
`variant`	`'default' \| 'primary' \| 'secondary' \| 'destructive'`	`'default'`	Color variant
`color`	`string`	—	Custom color (overrides variant)
`speed`	`number`	`800`	Rotation speed in ms
`children`	`ReactNode`	—	Custom spinner icon (replaces default SVG arc)
`className`	`string`	—	Additional CSS classes

Type	Description
`SpinnerProps`	Props for Spinner component
`SpinnerSize`	`'sm' \| 'md' \| 'lg'`
`SpinnerVariant`	`'default' \| 'primary' \| 'secondary' \| 'destructive'`