Star Rating

A star rating you can tap or scrub. Drag across the row and the rating follows the pointer, snapping to whole stars (or halves); dragging past the left edge clears it. Each star pops as it fills. Screen readers get an adjustable control that says "3 of 5", and a read-only rating is announced as an image with the same text. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add star-rating

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/star-rating.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { StarRating } from "@/components/ui/star-rating";

export default function Example() {
  const [rating, setRating] = useState(4);

  return <StarRating value={rating} onChange={setRating} allowHalf />;
}

Props