What is react-native-ratings?
The react-native-ratings package is a React Native component for adding customizable rating elements to your application. It supports star ratings, tap ratings, and swipe ratings, making it versatile for various use cases where user feedback is required.
What are react-native-ratings's main functionalities?
Star Rating
This feature allows you to create a star-based rating system. Users can rate by selecting the number of stars. The `onFinishRating` callback provides the selected rating value.
import { Rating } from 'react-native-ratings';
const StarRatingComponent = () => (
<Rating
type='star'
ratingCount={5}
imageSize={30}
onFinishRating={(rating) => console.log('Rating is: ' + rating)}
/>
);
Tap Rating
This feature provides a tap-based rating system similar to the one used by Airbnb. Users can tap on a rating and see a corresponding review label. The `onFinishRating` callback provides the selected rating value.
import { AirbnbRating } from 'react-native-ratings';
const TapRatingComponent = () => (
<AirbnbRating
count={5}
reviews={['Terrible', 'Bad', 'Okay', 'Good', 'Great']}
defaultRating={3}
size={20}
onFinishRating={(rating) => console.log('Rating is: ' + rating)}
/>
);
Swipe Rating
This feature allows for a swipe-based rating system with customizable images and colors. Users can swipe to select their rating. The `onFinishRating` callback provides the selected rating value.
import { Rating } from 'react-native-ratings';
const SwipeRatingComponent = () => (
<Rating
type='custom'
ratingImage={require('./path/to/custom/image.png')}
ratingColor='#3498db'
ratingBackgroundColor='#c8c7c8'
ratingCount={10}
imageSize={30}
onFinishRating={(rating) => console.log('Rating is: ' + rating)}
style={{ paddingVertical: 10 }}
/>
);
Other packages similar to react-native-ratings
react-native-star-rating
The react-native-star-rating package provides a simple star rating component for React Native. It is less feature-rich compared to react-native-ratings but is straightforward to use for basic star rating needs.
react-native-simple-rating
The react-native-simple-rating package offers a minimalistic approach to rating components. It is easy to integrate and customize but lacks the advanced features like tap and swipe ratings found in react-native-ratings.
react-native-rating-element
The react-native-rating-element package provides a flexible rating component with support for different shapes and sizes. It is comparable to react-native-ratings in terms of customization but may require more configuration.
Ratings component for React Native with tap and swipe enabled.
Tap Rating
Swipe Rating
Installation
Install the package using yarn or npm:
yarn add react-native-ratings
OR
npm install --save react-native-ratings
Usage
import { Rating, AirbnbRating } from 'react-native-ratings';
const WATER_IMAGE = require('./water.png')
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}
/>
<Rating
type='custom'
ratingImage={WATER_IMAGE}
ratingColor='#3498db'
ratingBackgroundColor='#c8c7c8'
ratingCount={10}
imageSize={30}
onFinishRating={this.ratingCompleted}
style={{ paddingVertical: 10 }}
/>
Also refer to the example
app for more detailed usage example.
API
AirbnbRating
prop | default | type | description |
---|
defaultRating | 3 | number | Initial value for the rating |
reviews | ['Terrible', 'Bad', 'Okay', 'Good', 'Great'] | string[] | 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 |
count | 5 | number | Total number of ratings to display |
selectedColor | #f1c40f | string (color) | Pass in a custom fill-color for the rating icon |
unSelectedColor | #BDC3C7 | string (color) | Pass in a custom not fill-color for the rating icon |
reviewColor | #f1c40f | string (color) | Pass in a custom text color for the review text |
size | 40 | number | The size of each rating image (optional) |
reviewSize | 25 | number | Pass in a custom font size for the review text |
showRating | true | boolean | Determines if to show the reviews above the rating |
isDisabled | false | boolean | Whether the rating can be modiefied by the user |
onFinishRating | none | function(value: number) | Callback method when the user finishes rating. Gives you the final rating value as a whole number |
starContainerStyle | none | object or stylesheet | Custom styles applied to the star container |
ratingContainerStyle | none | object or stylesheet | Custom styles applied to the rating container |
starImage | STAR_IMAGE | string | Pass in a custom base image source (optional) |
RatingProps
prop | default | type | description |
---|
type | star | string | Choose one of the built-in types: star , rocket , bell , heart or use type custom to render a custom image (optional) |
ratingImage | star | string | Pass in a custom image source; use this along with type='custom' prop above (optional) |
ratingColor | #f1c40f | string (color) | Pass in a custom fill-color for the rating icon; use this along with type='custom' prop above (optional) |
ratingBackgroundColor | white | string (color) | Pass in a custom background-fill-color for the rating icon; use this along with type='custom' prop above (optional) |
tintColor | none | string | Color used to change the background of the rating icon (optional) |
ratingCount | 5 | number | The number of rating images to display (optional) |
ratingTextColor | none | string | Color used for the text labels |
imageSize | 50 | number | The size of each rating image (optional) |
showRating | none | boolean | Displays the Built-in Rating UI to show the rating value in real-time (optional) |
readonly | false | boolean | Whether the rating can be modiefied by the user |
startingValue | ratingCount/2 | number | The initial rating to render |
fractions | 2 | number | The number of decimal places for the rating value; must be between 0 and 20 |
minValue | 0 | number | The minimum value the user can select |
style | none | style | Exposes style prop to add additonal styling to the container view (optional) |
jumpValue | 0 | number | The value to jump when rating value changes (if jumpValue === 0.5, rating value increases/decreases like 0, 0.5, 1.0, 1.5 ...). Default is 0 (not to jump) |
onStartRating | none | function(rating: number) | Callback method when the user starts rating. Gives you the start rating value as a whole number |
onSwipeRating | none | function(rating: number) | Callback method when the user is swiping. Gives you the current rating value as a whole number |
onFinishRating | none | function(rating: number) | Callback method when the user finishes rating. Gives you the final rating value as a whole number (required) |
Try it out
You can try it out with Expo here. Or you can also run the example
app locally.
Motivation
One of my friends showed me this Star Rating feature in Bootstrap and it looks really interesting. So I challenged myself to re-implement it in React Native.
Followed by that, for v3
, I recreated the Airbnb ratings component and added it to this repo, in case others find this useful. It works out of the box and is quite functional.
Also this is my first npm module
:confetti_ball:
Feedback
This repo is being actively manitained. Feel free to open a new Issue with a Feature Request
or submit a PR with an Enhancement
.