Rating

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/rating.json

Then run npx expo install --fix so react-native-gesture-handler, react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/rating.

Usage

import { useState } from "react";
import { Rating } from "@/components/goodui-native/rating/rating";

export function RateStay() {
  const [stars, setStars] = useState(0);
  return (
    <Rating
      size="lg"
      value={stars}
      onValueChange={setStars}
      onValueCommit={(v) => saveReview({ stars: v })}
      labels={["Terrible", "Bad", "Okay", "Good", "Great"]}
      accessibilityLabel="Your stay"
    />
  );
}

When to use

Examples

<Rating allowHalf defaultValue={3.5} accessibilityLabel="Wine rating" />

<Rating readOnly value={4.6} count={1284} showValue size="sm" />

<Rating
  value={effort}
  onValueChange={setEffort}
  allowClear
  icon={({ filled, color, size }) => <FlameIcon color={color} size={size} filled={filled} />}
/>

API reference

Motion and haptics

• •A tap sweeps the fill from the old rating to the new one in 90 to 420 ms depending on the distance; each symbol pops (a swell, a small tilt, then the bouncy spring) the moment the fill crosses one of its half steps, so 1 to 5 ripples left to right. Lowering the rating dips the emptied symbols instead.
• •While dragging, the fill follows the finger step by step on a 120 ms timing, with the same pops.
• •The label crossfades when the value changes.
• •Reduced motion: the fill jumps to the new value, symbols do not pop, labels change without fading.

• •Haptic: select each time the value changes, by tap, drag, keyboard or screen reader (haptic={false} turns it off)

• •The fill and pops run on the UI thread: one shared level drives every symbol's clip width, and each symbol reacts to it in a worklet. React only re-renders when the snapped value changes.

Accessibility

• •The input is one adjustable element (a slider on the web) with aria-valuemin 0, aria-valuemax, aria-valuenow and a value text such as '4 of 5, Good' or 'Not rated'.
• •Screen readers step it with increment and decrement; on the web the arrow keys step it (mirrored in right-to-left layouts), Home and End jump to the ends.
• •The touch area is 44 pt tall; dragging anywhere across the row sets the value, so small symbols stay easy to hit.
• •Read-only ratings are one image labelled with the visible number first: '4.6 out of 5 stars, 1,284 ratings'.
• •Labels beside the symbols are hidden from screen readers because the same word is in the value text.

Notes for AI

Related