Docyrus
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-ratingRequired Packages(1 package)
pnpm add react-native-reanimatedUsage
import { Rating } from '@/components/docyrus-native/rating';
<Rating value={3} onChange={(v) => console.log(v)} />
<Rating value={3.5} allowHalf showValue readonly />
<Rating value={4} max={10} size="lg" />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' |