Drag across the stars to rate; the top one throws a little spark burst.
Pro<Rating />5 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| value / onValueChange Controlled value (or use defaultValue). | number | — |
| defaultValue Initial value when uncontrolled. | number | 0 |
| max Number of icons. | number | 5 |
| allowHalf Half-icon precision when tapping or dragging. | boolean | false |
| readOnly Display only; fractional values (4.3) fill partially. | boolean | false |
| clearable Tap the current value again to reset to 0. | boolean | false |
| icon Star or heart icons; heart switches the default fill to danger. | "star" | "heart" | "star" |
| size 18 / 28 / 40pt, or any number. | "sm" | "md" | "lg" | number | "md" |
| accent Fill colour. | string | warning / danger |
| gap Space between icons. | number | 20% of size |
| haptics Selection tick for every step while tapping or dragging. | boolean | true |
| disabled Dims and blocks input. | boolean | false |
| style Style for the row of icons. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Tap or drag across the row to set the value, to half-icon precision with allowHalf. With clearable, tapping the current value clears it.
- Motion
- Icons fill smoothly and pop in a quick stagger with a wobble. When you raise the rating, the top icon throws a spark burst.
- Haptics
- A selection tick plays for every step while tapping or dragging.
- Screen readers
- One adjustable element read as 'N of 5'. Swipe up or down to change it by one step.
- Web
- Works with the mouse too, and shows a pointer cursor while interactive.
Source
Did you like the content?