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
![](https://raw.githubusercontent.com/Monte9/react-native-ratings/master/resources/airbnb_ratings.gif)
#
Usageimport { 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 modeconst { rating } = this.props;
<Rating imageSize={20} readonly startingValue={rating} style={styles.rating} />;
![readonly demo jpg](/react-native-elements/img/rating_readonly.png)
#
Fractions<Rating showRating fractions="{1}" startingValue="{3.3}" />
#
Props#
AirbnbRating#
Ratingfractions
imageSize
minValue
onFinishRating
onStartRating
ratingBackgroundColor
tintColor
ratingColor
ratingCount
ratingImage
ratingTextColor
readonly
showRating
startingValue
style
type
#
Referencecount
#
Total number of ratings to display
Type | Default |
---|---|
number | 5 |
defaultRating
#
Initial value for the rating
Type | Default |
---|---|
number | 3 |
fractions
#
The number of decimal places for the rating value; must be between 0 and 20 (optional)
Type | Default |
---|---|
number | undefined |
imageSize
#
The size of each rating image (optional)
Type | Default |
---|---|
number | 50 |
minValue
#
The minimum value the user can select
Type | Default |
---|---|
number | 0 |
onFinishRating
#
Callback method when the user finishes rating. Gives you the final rating value as a whole number (required)
Type | Default |
---|---|
function | none |
onStartRating
#
Callback method when the user starts the rating. (optional)
Type | Default |
---|---|
function | undefined |
ratingBackgroundColor
#
Pass in a custom background-fill-color for the rating icon; use this along with
type='custom'
prop above (optional)
Type | Default |
---|---|
string (color) | white |
tintColor
#
Pass in a custom background-color for the rating container; (optional)
Type | Default |
---|---|
string (color) | white |
ratingColor
#
Pass in a custom fill-color for the rating icon; use this along with
type='custom'
prop above (optional)
Type | Default |
---|---|
string (color) | #f1c40f |
ratingCount
#
The number of rating images to display (optional)
Type | Default |
---|---|
number | 5 |
ratingImage
#
Pass in a custom image source; use this along with type='custom'
prop above
(optional)
Type | Default |
---|---|
string | star |
ratingTextColor
#
Pass in a custom text color for the rating text (optional)
Type | Default |
---|---|
string (color) | #f1c40f |
readonly
#
Whether the rating can be modified by the user (optional)
Type | Default |
---|---|
boolean | false |
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
Type | Default |
---|---|
string[] | ['Terrible', 'Bad', 'Okay', 'Good', 'Great'] |
showRating
#
Determines if to show the reviews above the rating
Type | Default |
---|---|
boolean | true |
showRating
#
Displays the Built-in Rating UI to show the rating value in real-time (optional)
Type | Default |
---|---|
boolean | none |
startingValue
#
The initial rating to render (optional)
Type | Default |
---|---|
number | ratingCount / 2 |
style
#
Exposes style prop to add additional styling to the container view (optional)
Type | Default |
---|---|
function | none |
type
#
Choose one of the built-in types: star
, rocket
, bell
, heart
or use type
custom
to render a custom image (optional)
Type | Default |
---|---|
string | star |