Rating

Interactive star rating

Import: import { Rating } from 'react-native-mantine';

Usage

import { Rating } from 'react-native-mantine';
import { useState } from 'react';

const [value, setValue] = useState(3);

<Rating
  value={value}
  onChange={setValue}
  count={5}
  size="lg"
  color="yellow"
/>

// Read-only rating
<Rating value={4.5} readOnly />

Props

Prop	Type	Default	Description
`value`	`number`		Rating value (controlled) - current rating value
`defaultValue`	`number`	`0`	Default value (uncontrolled) - initial rating value
`onChange`	`(value: number) => void`		Called when rating value changes
`count`	`number`	`5`	Number of rating items to display
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`"md"`	Rating size that controls symbol size
`color`	`MantineColor`	`"yellow"`	Rating color from theme for filled symbols
`emptyColor`	`MantineColor`	`"gray"`	Empty symbol color from theme
`symbol`	`React.ReactNode`		Custom symbol for filled state (e.g., custom icon)
`emptySymbol`	`React.ReactNode`		Custom symbol for empty state
`fractions`	`number`	`1`	Allow fractional ratings for display (not input)
`readOnly`	`boolean`	`false`	Read-only mode - prevents user interaction
`highlightSelectedOnly`	`boolean`	`false`	Highlight only selected items, not hovered items
`style`	`ViewStyle`		Additional styles to apply to the rating container

Source on GitHub · npm