# rn-rating
URL: /docs/native/docyrus/rating

Star rating input with half-star support and custom icon rendering.

## Installation

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

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

## Usage

```tsx
import { Rating } from '@/components/docyrus-native/rating';

<Rating value={3} onChange={(v) => console.log(v)} />

```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `number` | `0` | Current rating value |
| `onChange` | `(value: number) => void` | — | Callback when rating changes |
| `max` | `number` | `5` | Maximum number of stars |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Star size |
| `readonly` | `boolean` | `false` | Whether the rating is read-only |
| `disabled` | `boolean` | `false` | Whether the rating is disabled |
| `allowHalf` | `boolean` | `false` | Enable half-star ratings |
| `showValue` | `boolean` | `false` | Show numeric value next to stars |
| `color` | `string` | `'#fbbf24'` | Fill color for active stars |
| `emptyColor` | `string` | — | Color for empty stars (defaults to theme mutedForeground) |
| `renderIcon` | `(props: { filled: boolean; half: boolean; color: string; size: number }) => ReactNode` | — | Custom icon render function |
| `className` | `string` | — | Additional CSS classes |
| `accessibilityLabel` | `string` | `'Rating'` | Accessibility label |

## Type Exports

| Type | Description |
|------|-------------|
| `RatingProps` | Props for Rating component |
| `RatingSize` | `'sm' \| 'md' \| 'lg'` |