Skip to main content
Version: 4.0.0-beta.0

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 react-native-ratings

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}" />

Fractions demo gif

Props

Rating


Reference

count

Total number of ratings to display

TypeDefault
number5

defaultRating

Initial value for the rating

TypeDefault
number3

fractions

The number of decimal places for the rating value; must be between 0 and 20 (optional)

TypeDefault
numberundefined

imageSize

The size of each rating image (optional)

TypeDefault
number50

minValue

The minimum value the user can select

TypeDefault
number0

onFinishRating

Callback method when the user finishes rating. Gives you the final rating value as a whole number (required)

TypeDefault
functionnone

onStartRating

Callback method when the user starts the rating. (optional)

TypeDefault
functionundefined

ratingBackgroundColor

Pass in a custom background-fill-color for the rating icon; use this along with type='custom' prop above (optional)

TypeDefault
string (color)white

tintColor

Pass in a custom background-color for the rating container; (optional)

TypeDefault
string (color)white

ratingColor

Pass in a custom fill-color for the rating icon; use this along with type='custom' prop above (optional)

TypeDefault
string (color)#f1c40f

ratingCount

The number of rating images to display (optional)

TypeDefault
number5

ratingImage

Pass in a custom image source; use this along with type='custom' prop above (optional)

TypeDefault
stringstar

ratingTextColor

Pass in a custom text color for the rating text (optional)

TypeDefault
string (color)#f1c40f

readonly

Whether the rating can be modified by the user (optional)

TypeDefault
booleanfalse

reviews

Labels to show when each value is tapped e.g. If the first star is tapped, then value in index 0 will be used as the label

TypeDefault
string[]['Terrible', 'Bad', 'Okay', 'Good', 'Great']

showRating

Determines if to show the reviews above the rating

TypeDefault
booleantrue

showRating

Displays the Built-in Rating UI to show the rating value in real-time (optional)

TypeDefault
booleannone

startingValue

The initial rating to render (optional)

TypeDefault
numberratingCount / 2

style

Exposes style prop to add additional styling to the container view (optional)

TypeDefault
functionnone

type

Choose one of the built-in types: star, rocket, bell, heart or use type custom to render a custom image (optional)

TypeDefault
stringstar