1 | <p align="center">
|
2 | <a href="https://github.com/Monte9/react-native-ratings">
|
3 | <img alt="react-native-ratings" src="./resources/logo.png" width="450">
|
4 | </a>
|
5 | </p>
|
6 |
|
7 | <p align="center">
|
8 | Ratings component for React Native with tap and swipe enabled.
|
9 | </p>
|
10 |
|
11 | <p align="center">
|
12 | <a href="https://www.npmjs.com/package/react-native-ratings"><img src="https://img.shields.io/npm/v/react-native-ratings.svg?style=flat-square"></a>
|
13 | <a href="https://www.npmjs.com/package/react-native-ratings"><img src="https://img.shields.io/npm/dm/react-native-ratings.svg?style=flat-square"></a>
|
14 | </p>
|
15 |
|
16 | ## Demo - [try it now](https://expo.io/@monte9/react-native-ratings)
|
17 |
|
18 | ![Demo gif](./resources/airbnb_ratings.gif)
|
19 |
|
20 | ### Tap Rating
|
21 |
|
22 | <div style="flex-direction: row">
|
23 | <img src="./resources/tap_rating_1.png" width="300">
|
24 | <img src="./resources/tap_rating_2.png" width="300">
|
25 | </div>
|
26 |
|
27 | ### Swipe Rating
|
28 |
|
29 | <div style="flex-direction: row">
|
30 | <img src="./resources/swipe_rating_1.png" width="300">
|
31 | <img src="./resources/swipe_rating_2.png" width="300">
|
32 | </div>
|
33 |
|
34 | ## Installation
|
35 |
|
36 | Install the package using yarn or npm:
|
37 |
|
38 | ```yarn add react-native-ratings```
|
39 |
|
40 | OR
|
41 |
|
42 | ```npm install --save react-native-ratings```
|
43 |
|
44 | ## Usage
|
45 |
|
46 | ``` js
|
47 | import { Rating, AirbnbRating } from 'react-native-ratings';
|
48 |
|
49 | const WATER_IMAGE = require('./water.png')
|
50 |
|
51 | ratingCompleted(rating) {
|
52 | console.log("Rating is: " + rating)
|
53 | }
|
54 |
|
55 | <AirbnbRating />
|
56 |
|
57 | <AirbnbRating
|
58 | count={11}
|
59 | reviews={["Terrible", "Bad", "Meh", "OK", "Good", "Hmm...", "Very Good", "Wow", "Amazing", "Unbelievable", "Jesus"]}
|
60 | defaultRating={11}
|
61 | size={20}
|
62 | />
|
63 |
|
64 | <Rating
|
65 | showRating
|
66 | onFinishRating={this.ratingCompleted}
|
67 | style={{ paddingVertical: 10 }}
|
68 | />
|
69 |
|
70 | <Rating
|
71 | type='heart'
|
72 | ratingCount={3}
|
73 | imageSize={60}
|
74 | showRating
|
75 | onFinishRating={this.ratingCompleted}
|
76 | />
|
77 |
|
78 | <Rating
|
79 | type='custom'
|
80 | ratingImage={WATER_IMAGE}
|
81 | ratingColor='#3498db'
|
82 | ratingBackgroundColor='#c8c7c8'
|
83 | ratingCount={10}
|
84 | imageSize={30}
|
85 | onFinishRating={this.ratingCompleted}
|
86 | style={{ paddingVertical: 10 }}
|
87 | />
|
88 | ```
|
89 |
|
90 | Also refer to the [`example`](https://github.com/Monte9/react-native-ratings/tree/master/react_native_ratings_example) app for more detailed usage example.
|
91 |
|
92 | ## API
|
93 |
|
94 | ### AirbnbRating
|
95 |
|
96 | | prop | default | type | description |
|
97 | | ---- | ---- | ----| ---- |
|
98 | | defaultRating | 3 | number | Initial value for the rating |
|
99 | | 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 |
|
100 | | count | 5 | number | Total number of ratings to display |
|
101 | | selectedColor | #f1c40f | string (color) | Pass in a custom fill-color for the rating icon |
|
102 | | unSelectedColor | #BDC3C7 | string (color) | Pass in a custom not fill-color for the rating icon |
|
103 | | reviewColor | #f1c40f | string (color) | Pass in a custom text color for the review text |
|
104 | | size | 40 | number | The size of each rating image (optional) |
|
105 | | reviewSize | 25 | number | Pass in a custom font size for the review text |
|
106 | | showRating | `true` | boolean | Determines if to show the reviews above the rating |
|
107 | | isDisabled | false | boolean | Whether the rating can be modiefied by the user |
|
108 | | onFinishRating | none | function(value: number) | Callback method when the user finishes rating. Gives you the final rating value as a whole number |
|
109 | | starContainerStyle | none | object or stylesheet | Custom styles applied to the star container |
|
110 | | ratingContainerStyle | none | object or stylesheet | Custom styles applied to the rating container |
|
111 | | starImage | STAR_IMAGE | string | Pass in a custom base image source (optional) |
|
112 |
|
113 | ### RatingProps
|
114 |
|
115 | | prop | default | type | description |
|
116 | | ---- | ---- | ----| ---- |
|
117 | | type | `star` | string | Choose one of the built-in types: `star`, `rocket`, `bell`, `heart` or use type `custom` to render a custom image (optional) |
|
118 | | ratingImage | `star` | string | Pass in a custom image source; use this along with `type='custom'` prop above (optional) |
|
119 | | ratingColor | #f1c40f | string (color) | Pass in a custom fill-color for the rating icon; use this along with `type='custom'` prop above (optional) |
|
120 | | ratingBackgroundColor | `white` | string (color) | Pass in a custom background-fill-color for the rating icon; use this along with `type='custom'` prop above (optional) |
|
121 | | tintColor | none | string | Color used to change the background of the rating icon (optional)|
|
122 | | ratingCount | 5 | number | The number of rating images to display (optional) |
|
123 | | ratingTextColor | none | string | Color used for the text labels |
|
124 | | imageSize | 50 | number | The size of each rating image (optional) |
|
125 | | showRating | none | boolean | Displays the Built-in Rating UI to show the rating value in real-time (optional) |
|
126 | | readonly | false | boolean | Whether the rating can be modiefied by the user |
|
127 | | startingValue | `ratingCount/2` | number | The initial rating to render |
|
128 | | fractions | 2 | number | The number of decimal places for the rating value; must be between 0 and 20 |
|
129 | | minValue | 0 | number | The minimum value the user can select |
|
130 | | style | none | style | Exposes style prop to add additonal styling to the container view (optional) |
|
131 | | 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)|
|
132 | | onStartRating | none | function(rating: number) | Callback method when the user starts rating. Gives you the start rating value as a whole number |
|
133 | | onSwipeRating | none | function(rating: number) | Callback method when the user is swiping. Gives you the current rating value as a whole number|
|
134 | | onFinishRating | none | function(rating: number) | Callback method when the user finishes rating. Gives you the final rating value as a whole number (required) |
|
135 |
|
136 | ## Try it out
|
137 |
|
138 | You can try it out with Expo [here](https://expo.io/@monte9/react-native-ratings). Or you can also run the [`example`](https://github.com/Monte9/react-native-ratings/tree/master/react_native_ratings_example) app locally.
|
139 |
|
140 |
|
141 | ## Motivation
|
142 |
|
143 | One of my friends showed me [this](https://github.com/kartik-v/bootstrap-star-rating/) [Star Rating feature in Bootstrap](http://plugins.krajee.com/star-rating-demo-theme-default) and it looks really interesting. So I challenged myself to re-implement it in React Native.
|
144 |
|
145 | 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.
|
146 |
|
147 | Also this is my first [`npm module`](https://www.npmjs.com/package/react-native-ratings) :confetti_ball:
|
148 |
|
149 | ## Feedback
|
150 |
|
151 | This repo is being actively manitained. Feel free to open a new Issue with a `Feature Request` or submit a PR with an `Enhancement`.
|