Components
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-progressRequired Packages(1 package)
pnpm add react-native-reanimatedUsage
import { Progress } from '@/components/docyrus-native/progress';
<Progress value={60} />
<Progress value={80} variant="success" showLabel />
<Progress value={30} size="lg" variant="warning" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Progress value (0-100) |
showLabel | boolean | false | Show percentage label |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Track height size |
variant | 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'default' | Fill color variant |
className | string | — | Additional CSS classes |
labelClassName | string | — | Label text CSS classes |
trackClassName | string | — | Track background CSS classes |
fillClassName | string | — | Fill bar CSS classes |
Type Exports
| Type | Description |
|---|---|
ProgressProps | Props for Progress component |
ProgressSize | 'xs' | 'sm' | 'md' | 'lg' |
ProgressVariant | 'default' | 'secondary' | 'success' | 'warning' | 'destructive' |