Skip to main content
Version: Bleeding Edge 🚧

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. There are two tyoes of rating - TapRating and SwipeRating. This documentation is for Swipe Rating version.

Usage

Import

import { Rating } from '@rneui/themed';

Theme Key

Rating

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

NameTypeDefaultDescription
fractionsanyThe number of decimal places for the rating value; must be between 0 and 20
imageSizenumberThe size of each rating imageDefault is 50
jumpValuenumberThe number to jump per swipeDefault is 0 (not to jump)
minValuenumberThe minimum value the user can selectDefault is 0
onFinishRatingFunctionCallback method when the user finishes rating. Gives you the final rating value as a whole number
onStartRatingFunctionCallback method when the user starts rating.
onSwipeRating(number: any) => voidCallback method when the user is swiping.
ratingBackgroundColorstringPass in a custom background-fill-color for the rating icon; use this along with type='custom' prop aboveDefault is 'white'
ratingColorstringPass in a custom fill-color for the rating icon; use this along with type='custom' prop aboveDefault is '#f1c40f'
ratingCountnumberNumber of rating images to displayDefault is 5
ratingImageReactNodePass in a custom image source; use this along with type='custom' prop above
ratingTextColorstringColor used for the text labels
readonlybooleanWhether the rating can be modiefied by the userDefault is false
showRatingbooleanDisplays the Built-in Rating UI to show the rating value in real-timeDefault is false
showReadOnlyTextbooleanWhether the text is read onlyDefault is false
startingValuenumberThe initial rating to renderDefault is ratingCount/2
styleView StyleExposes style prop to add additonal styling to the container view
tintColorstringColor used for the background
typestringGraphic used for represent a ratingDefault is 'star'

Playground

Loading...