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