rslabdocs

Rating

A star rating where one gesture handles both a tap and a drag across several stars, with a haptic on every change.

ReanimatedGesture HandlerHapticsSource

Prerequisites

Rating needs a pan gesture, so gesture-handler comes along with icons, haptics, and Reanimated.


npx expo install @hugeicons/core-free-icons @hugeicons/react-native expo-haptics react-native-gesture-handler react-native-reanimated

Install


npx @rslab/cli add rating

Usage

import { Rating } from '@/components/ui/Rating';

const [rating, setRating] = useState(3);

<Rating value={rating} onChange={setRating} />;

Shrink it for a compact inline score, or extend the scale:

<Rating value={quick} onChange={setQuick} max={10} size={20} />

Props

PropTypeDefault
value
number
-

Current rating, from 1 to max. Controlled.

onChange
(value: number) => void
-
max?
number
5

Number of stars.

size?
number
28

Icon size in px.

disabled?
boolean
false

Fades the row and disables the gesture.

haptic?
boolean
true

Selection tick on every star crossed.

className?
string
-

Extend or override the outer wrapper.

See exactly how this works with an RSLAB subscription.

Get Pro

On this page