Rating

#Rating

Effect demonstration

1. Click to rate

<TapRating count={5} selectedColor="red" />

2. Do not display the text corresponding to the rating

<TapRating count={5} showReview={false} />

3. Sliding rating is rounded up

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

<Text>The score you selected is: {rating}</Text>
<SwipeRating
  count={5}
  fractions={0}
  defaultRating={0}
  onFinishRating={position => {
    setRating(position);
  }}
/>

API

TapRating

Properties	Required	Description	Type	Default Value
defaultRating	false	Default score	number
count	false	Total number of ratings	number	5
showReview	false	Whether to display text	boolean	true
reviewSize	false	text size	number	25
reviewColor	false	text color	string
reviews	false	literal array	string[]	['very bad', 'very poor', 'average', 'very good', 'very good']
size	false	Rating size	number	40
disabled	false	Whether to disable	boolean	false
starStyle	false	Rating style	ImageStyle
selectedColor	false	Rating selected color	string	gold
unselectedColor	false	Rating unselected color	string	gray
outRangeScale	false	Rating scale size when clicked	number
onFinishRating	false	Callback event when rating ends	(rating: number) => void	1.2
activeOpacity	false	Opacity when pressed	number	0.6

SwipeRating

Properties	Required	Description	Type	Default Value
ratingBgColor	false	Rating background color	string
ratingFillColor	false	Rating fill color	string
count	false	Total number of ratings	number	5
strokeColor	false	Rating border color	string
size	false	Rating size	number	40
disabled	false	Whether to disable	boolean
defaultRating	false	Default selected rating	number	2.5
minValue	false	Minimum rating	number	0
fractions	false	Number of decimal places. Round up when passing 0	number	2
onFinishRating	false	Callback event when the rating ends	(rating: number) => void