Rating

Inputs & Controls

Rating

Star rating input + display component.

Usage

Capture feedback scores or show aggregated ratings.

Highlights

• Fractional display and animation
• Custom icon + color tokens

When to use it

• Users review content with 1-5 style ratings.
• Inline analytics require quick scanning.

Related components

IconText

Examples

Default

Preview (Web)

import { Rating } from 'react-native-molecules/components/Rating';

export default function Example() {
  return <Rating count={5} />;
}

Prop	Type	Default	Description
count	number | undefined	—	rating count
value	number | undefined	—	The rating value.
defaultValue	number | undefined	—	The default value for the uncontrolled state
onChange	((value: number) => void) | undefined	—	Callback function that is fired when the hover state changes.
readonly	boolean | undefined	—	Removes all hover effects and pointer events.
disabled	boolean | undefined	—	If `true`, the component is disabled
iconName	string | undefined	—	name of the empty icon
iconType	"material-community" | "feather" | undefined	—	the type of the empty icon
activeIconName	string | undefined	—	name of the active icon
activeIconType	"material-community" | "feather" | undefined	—	type of the active icon
size	number | undefined	—	size of all the icons
color	string | undefined	—	color of the empty icon
activeColor	string | undefined	—	color of the active icon
iconContainerStyle	ViewStyle | undefined	—	style of the icon container component
iconProps	Omit<IconProps, "ref" | "color" | "name" | "type"> | undefined	—	props for to pass down to all the icons
showTooltips	boolean | undefined	—	display tooltips
tooltipProps	TooltipProps | undefined	—	for configuring tooltip won't be used if showTooltips is false

Defined in react-native-molecules/components/Rating