Rating

Rating allows users to rate items or display existing ratings. Use for feedback, reviews, or quality indicators.

Preview

★★★★☆

Basic Usage

★★★☆☆

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

<Rating
  value={rating}
  onValueChange={setRating}
  accessibilityLabel="Rate this reading"
/>

Sizes

★★★☆☆

<Rating size="sm" value={rating} onValueChange={setRating} accessibilityLabel="Small rating" />
<Rating size="md" value={rating} onValueChange={setRating} accessibilityLabel="Medium rating" />
<Rating size="lg" value={rating} onValueChange={setRating} accessibilityLabel="Large rating" />

With Value Display

★★★★☆

4.0

<Rating
  value={rating}
  onValueChange={setRating}
  showValue
  accessibilityLabel="Rate this"
/>

Read-Only

★★★★★

<Rating
  value={5}
  readOnly
  accessibilityLabel="5 star rating"
/>

Rating Display

Compact read-only display with optional review count.

★4.5

★4.5(128)

<RatingDisplay value={4.5} />
<RatingDisplay value={4.5} reviewCount={128} />

API Reference

Rating Props

Prop	Type	Default	Description
`value`	`number`	Required	Current rating (0-max)
`onValueChange`	`(value: number) => void`	-	Change handler
`max`	`number`	`5`	Maximum rating value
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Rating size
`readOnly`	`boolean`	`false`	Read-only mode
`showValue`	`boolean`	`false`	Show numeric value
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	`'Rating'`	Screen reader label

RatingDisplay Props

Prop	Type	Default	Description
`value`	`number`	Required	Rating value
`max`	`number`	`5`	Maximum rating
`size`	`RatingSize`	`'sm'`	Display size
`reviewCount`	`number`	-	Number of reviews
`style`	`ViewStyle`	-	Custom styles