# rn-progress
URL: /docs/native/components/progress

Linear progress bar with label, size, and color variant options.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-progress
```

**Dependencies:**
- [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)

## Usage

```tsx
import { Progress } from '@/components/docyrus-native/progress';

```

## 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'` |