{"id":21388517,"url":"https://github.com/monte9/react-native-ratings","last_synced_at":"2025-05-14T15:10:22.240Z","repository":{"id":37580157,"uuid":"90092465","full_name":"Monte9/react-native-ratings","owner":"Monte9","description":"Tap and Swipe Ratings component for React Native.","archived":false,"fork":false,"pushed_at":"2024-04-15T14:58:13.000Z","size":8691,"stargazers_count":920,"open_issues_count":66,"forks_count":197,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-06T05:02:59.443Z","etag":null,"topics":["android","gestures","ios","ratings","react-native","ui-components"],"latest_commit_sha":null,"homepage":"https://expo.io/@monte9/react-native-ratings","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Monte9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-03T00:51:51.000Z","updated_at":"2025-04-21T16:07:18.000Z","dependencies_parsed_at":"2024-06-18T11:20:28.613Z","dependency_job_id":"e85eb850-0e74-401e-b386-5c0e8aee6afe","html_url":"https://github.com/Monte9/react-native-ratings","commit_stats":{"total_commits":168,"total_committers":36,"mean_commits":4.666666666666667,"dds":0.7619047619047619,"last_synced_commit":"4781896213e6a3d34332d4666c676b59942f8be6"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monte9%2Freact-native-ratings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monte9%2Freact-native-ratings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monte9%2Freact-native-ratings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monte9%2Freact-native-ratings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Monte9","download_url":"https://codeload.github.com/Monte9/react-native-ratings/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254170054,"owners_count":22026219,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","gestures","ios","ratings","react-native","ui-components"],"created_at":"2024-11-22T12:18:21.755Z","updated_at":"2025-05-14T15:10:22.196Z","avatar_url":"https://github.com/Monte9.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Monte9/react-native-ratings\"\u003e\n    \u003cimg alt=\"react-native-ratings\" src=\"./resources/logo.png\" width=\"450\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Ratings component for React Native with tap and swipe enabled.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-ratings\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-native-ratings.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-ratings\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/react-native-ratings.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Demo - [try it now](https://expo.io/@monte9/react-native-ratings)\n\n![Demo gif](./resources/airbnb_ratings.gif)\n\n### Tap Rating\n\n\u003cdiv style=\"flex-direction: row\"\u003e\n  \u003cimg src=\"./resources/tap_rating_1.png\" width=\"300\"\u003e\n  \u003cimg src=\"./resources/tap_rating_2.png\" width=\"300\"\u003e\n\u003c/div\u003e\n\n### Swipe Rating\n\n\u003cdiv style=\"flex-direction: row\"\u003e\n  \u003cimg src=\"./resources/swipe_rating_1.png\" width=\"300\"\u003e\n  \u003cimg src=\"./resources/swipe_rating_2.png\" width=\"300\"\u003e\n\u003c/div\u003e\n\n## Installation\n\nInstall the package using yarn or npm:\n\n```yarn add react-native-ratings```\n\n  OR\n  \n```npm install --save react-native-ratings```\n\n## Usage\n\n``` js\nimport { Rating, AirbnbRating } from 'react-native-ratings';\n\nconst WATER_IMAGE = require('./water.png')\n\nratingCompleted(rating) {\n  console.log(\"Rating is: \" + rating)\n}\n\n\u003cAirbnbRating /\u003e\n\n\u003cAirbnbRating\n  count={11}\n  reviews={[\"Terrible\", \"Bad\", \"Meh\", \"OK\", \"Good\", \"Hmm...\", \"Very Good\", \"Wow\", \"Amazing\", \"Unbelievable\", \"Jesus\"]}\n  defaultRating={11}\n  size={20}\n/\u003e\n\n\u003cRating\n  showRating\n  onFinishRating={this.ratingCompleted}\n  style={{ paddingVertical: 10 }}\n/\u003e\n\n\u003cRating\n  type='heart'\n  ratingCount={3}\n  imageSize={60}\n  showRating\n  onFinishRating={this.ratingCompleted}\n/\u003e\n\n\u003cRating\n  type='custom'\n  ratingImage={WATER_IMAGE}\n  ratingColor='#3498db'\n  ratingBackgroundColor='#c8c7c8'\n  ratingCount={10}\n  imageSize={30}\n  onFinishRating={this.ratingCompleted}\n  style={{ paddingVertical: 10 }}\n/\u003e\n```\n\nAlso refer to the [`example`](https://github.com/Monte9/react-native-ratings/tree/master/react_native_ratings_example) app for more detailed usage example.\n\n## API\n\n### AirbnbRating\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| defaultRating | 3 | number | Initial value for the rating |\n| 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 |\n| count | 5 | number | Total number of ratings to display |\n| selectedColor | #f1c40f | string (color) | Pass in a custom fill-color for the rating icon |\n| unSelectedColor | #BDC3C7 | string (color) | Pass in a custom not fill-color for the rating icon |\n| reviewColor | #f1c40f | string (color) | Pass in a custom text color for the review text |\n| size | 40 | number | The size of each rating image (optional) |\n| reviewSize | 25 | number | Pass in a custom font size for the review text |\n| showRating | `true` | boolean | Determines if to show the reviews above the rating |\n| isDisabled | false | boolean | Whether the rating can be modiefied by the user |\n| onFinishRating | none | function(value: number) | Callback method when the user finishes rating. Gives you the final rating value as a whole number |\n| starContainerStyle | none | object or stylesheet | Custom styles applied to the star container |\n| ratingContainerStyle | none | object or stylesheet | Custom styles applied to the rating container |\n| starImage | STAR_IMAGE | string | Pass in a custom base image source (optional) |\n| starStyle | none | object or stylesheet | Custom styles applied to the star (optional) |\n\n### RatingProps\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| type | `star` | string | Choose one of the built-in types: `star`, `rocket`, `bell`, `heart` or use type `custom` to render a custom image (optional) |\n| ratingImage | `star` | string | Pass in a custom image source; use this along with `type='custom'` prop above (optional) |\n| ratingColor | #f1c40f | string (color) | Pass in a custom fill-color for the rating icon; use this along with `type='custom'` prop above (optional) |\n| ratingBackgroundColor | `white` | string (color) | Pass in a custom background-fill-color for the rating icon; use this along with `type='custom'` prop above (optional) |\n| tintColor | none | string | Color used to change the background of the rating icon (optional)|\n| ratingCount | 5 | number | The number of rating images to display (optional) |\n| ratingTextColor | none | string | Color used for the text labels |\n| imageSize | 50 | number | The size of each rating image (optional) |\n| showRating | none | boolean | Displays the Built-in Rating UI to show the rating value in real-time (optional) |\n| readonly | false | boolean | Whether the rating can be modiefied by the user |\n| startingValue | `ratingCount/2` | number | The initial rating to render |\n| fractions | 2 | number | The number of decimal places for the rating value; must be between 0 and 20 |\n| minValue | 0 | number | The minimum value the user can select |\n| style | none | style | Exposes style prop to add additonal styling to the container view (optional) |\n| 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)|\n| onStartRating | none | function(rating: number) | Callback method when the user starts rating. Gives you the start rating value as a whole number |\n| onSwipeRating | none | function(rating: number) | Callback method when the user is swiping. Gives you the current rating value as a whole number|\n| onFinishRating | none | function(rating: number) | Callback method when the user finishes rating. Gives you the final rating value as a whole number (required) |\n\n## Try it out\n\nYou 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.\n\n\n## Motivation\n\nOne 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.\n\nFollowed 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.\n\nAlso this is my first [`npm module`](https://www.npmjs.com/package/react-native-ratings) :confetti_ball:\n\n## Feedback\n\nThis repo is being actively manitained. Feel free to open a new Issue with a `Feature Request` or submit a PR with an `Enhancement`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonte9%2Freact-native-ratings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonte9%2Freact-native-ratings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonte9%2Freact-native-ratings/lists"}