REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Form Controls

Rating

An interactive star rating component for collecting user feedback.

Example

Preview

Code

Props

Rating Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the rating container.

value

number

—

The current rating value.

onChange

(value: number) => void

—

Callback invoked when the rating value changes.

max

number

5

The maximum number of rating icons.

size

'sm' | 'md' | 'lg' | 'xl'

'md'

Controls the size of the rating icons.

isReadOnly

boolean

false

When true, the rating is display-only and not interactive.

RatingIcon Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for a rating icon.

filledIcon

React.ElementType

—

The icon component to render when the rating position is filled.

emptyIcon

React.ElementType

—

The icon component to render when the rating position is empty.

Usage Guidelines

When to use

Use Rating for collecting user reviews, feedback scores, or satisfaction ratings.

Best practices

•

Use isReadOnly for display-only ratings in product listings or reviews.

•

Provide visual distinction between filled and empty icons for clarity.

•

Use a 5-star scale for familiarity unless domain conventions differ.

Accessibility

Rating announces the current value and maximum to screen readers (e.g., "3 out of 5 stars"). Interactive mode supports touch and keyboard selection.

Related Components

Slider

A compound range slider component with track, filled track, and thumb sub-components for selecting numeric values.

Icon

A wrapper component for rendering icon elements from any icon library via the `as` prop.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License