Rating

Ratings are used to collect measurable feedback from users. Use Rating over an Input where imagery can increase user interaction. This component is imported from @rn-vui/ratings. There are two tyoes of rating - TapRating and SwipeRating. This documentation is for Swipe Rating version.

Import

import { Rating } from '@rn-vui/themed';

Theme Key

Rating

Usage

Read-only mode

const { rating } = this.props;

<Rating imageSize={20} readonly startingValue={rating} style={styles.rating} />;

Fractions

<Rating showRating fractions="{1}" startingValue="{3.3}" />

Props

Name	Type	Default	Description
fractions	any	0	The number of decimal places for the rating value; must be between 0 and 20
imageSize	number	50	The size of each rating image
jumpValue	number	0 (not to jump)	The number to jump per swipe
minValue	number	0	The minimum value the user can select
onFinishRating	(value: number) => void		Callback method when the user finishes rating. Gives you the final rating value as a whole number
onStartRating	(value: number) => void		Callback method when the user starts rating.
onSwipeRating	(value: number) => void		Callback method when the user is swiping.
ratingBackgroundColor	string	'white'	Pass in a custom background-fill-color for the rating icon; use this along with type='custom' prop above
ratingColor	string	'#f1c40f'	Pass in a custom fill-color for the rating icon; use this along with type='custom' prop above
ratingCount	number	5	Number of rating images to display
ratingImage	ReactNode		Pass in a custom image source; use this along with type='custom' prop above
ratingTextColor	string	#f1c40f	Color used for the text labels
readonly	boolean	false	Whether the rating can be modified by the user
showRating	boolean	false	Displays the Built-in Rating UI to show the rating value in real-time
showReadOnlyText	boolean	false	Whether the text is read only
startingValue	number	ratingCount/2	The initial rating to render
style	View Style		Exposes style prop to add additional styling to the container view
tintColor	string		Color used for the background
type	star | heart | rocket | bell | custom	star	Graphic used for represent a rating

Playground

Loading...