Skip to main content
Version: 1.2.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#

import { Rating, AirbnbRating } from 'react-native-elements';
ratingCompleted(rating) {  console.log("Rating is: " + rating)}
<AirbnbRating />
<AirbnbRating  count={11}  reviews={["Terrible", "Bad", "Meh", "OK", "Good", "Hmm...", "Very Good", "Wow", "Amazing", "Unbelievable", "Jesus"]}  defaultRating={11}  size={20}/>
<Rating  showRating  onFinishRating={this.ratingCompleted}  style={{ paddingVertical: 10 }}/>
<Rating  type='heart'  ratingCount={3}  imageSize={60}  showRating  onFinishRating={this.ratingCompleted}/>
const WATER_IMAGE = require('./water.png')
<Rating  type='custom'  ratingImage={WATER_IMAGE}  ratingColor='#3498db'  ratingBackgroundColor='#c8c7c8'  ratingCount={10}  imageSize={30}  onFinishRating={this.ratingCompleted}  style={{ paddingVertical: 10 }}/>

Read-only mode#

const { rating } = this.props;
<Rating  imageSize={20}  readonly  startingValue={rating}  style={{ styles.rating }}/>
readonly demo jpg

Fractions#

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

Fractions demo gif


Props#

AirbnbRating#

Rating#


Reference#

defaultRating#

Initial value for the rating

TypeDefault
number3

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']

count#

Total number of ratings to display

TypeDefault
number5

showRating#

Determines if to show the reviews above the rating

TypeDefault
booleantrue

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

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

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

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

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

minValue#

The minimum value the user can select

TypeDefault
number0

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