About this animation
A five-star control that fills under a drag, lights each star, and celebrates a perfect rating.
How it works
- Five reusable Skia star paths render an empty layer and a clipped color layer.
- Horizontal gesture position is quantized to whole or half steps and written to one shared rating value.
- Each star watches its own fill threshold on the UI thread and runs a short independent jump.
- The release commits through the controlled or uncontrolled API; read-only values use the same partial fill.
- Reaching five stars triggers a short surface pop and expanding completion ring.
Install
npx expo install @shopify/react-native-skia expo-linear-gradient react-native-gesture-handler react-native-reanimated react-native-workletsFor web, follow Expo's Skia CanvasKit setup if your bundler does not already copy the WASM asset.
Usage
<DragStarRating defaultValue={3} onChange={setRating} />
<DragStarRating value={rating} onChange={setRating} allowHalf size={40} color="#F2B544" />
<DragStarRating colorScheme="dark" variant="bold" glowColor="#FF5A4E" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled rating. |
defaultValue | number | 0 | Initial uncontrolled rating. |
onChange | (value: number) => void | — | Receives committed ratings. |
allowHalf | boolean | false | Enables half-star steps. |
readOnly | boolean | false | Disables interaction. |
size | number | 36 | Star size. |
gap | number | 7 | Space between stars. |
color | string | '#F2B544' | Filled color. |
emptyColor | string | '#D9D9E0' | Empty color. |
colorScheme | 'light' | 'dark' | 'auto' | 'auto' | Material default appearance. |
variant | 'soft' | 'glass' | 'bold' | 'soft' | Surface personality. |
glowColor | string | color | Perfect-rating glow color. |
jumpHeight | number | 0.16 | Jump height relative to star size. |
jumpDuration | number | 110 | Jump-up duration in milliseconds. |
accessibilityLabel | string | 'Star rating' | Screen-reader label. |
style | StyleProp<ViewStyle> | — | Outer style. |
testID | string | — | Test identifier. |
The ref exposes setValue(value) and reset().
Compatibility
- Expo SDK 57, React Native 0.86, Reanimated 4.5, Skia 2.6
- iOS and Android supported but not device-verified; web verified by the project gate
- Works in Expo Go
Accessibility
The component is an adjustable control with its current value announced in stars. Increment and decrement actions honor half steps; read-only mode is disabled. Reduced Motion removes the jump while preserving fill changes.
