{"id":25414088,"url":"https://github.com/aashu-dubey/react-native-rating-bar","last_synced_at":"2025-10-31T07:31:53.017Z","repository":{"id":57699440,"uuid":"497316591","full_name":"Aashu-Dubey/react-native-rating-bar","owner":"Aashu-Dubey","description":"A React Native component for generating and displaying interactive Tap or Swipe enabled Ratings.","archived":false,"fork":false,"pushed_at":"2022-10-28T22:35:41.000Z","size":651,"stargazers_count":18,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-02T17:41:03.895Z","etag":null,"topics":["android","gestures","ios","library","npm","package","ratingbar","ratings","react-native","react-native-rating-bar","reviews","vector-icons"],"latest_commit_sha":null,"homepage":"https://snack.expo.dev/@ashu_dubey/rn-rating-bar-demo","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/Aashu-Dubey.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-28T12:50:28.000Z","updated_at":"2024-07-23T15:44:29.000Z","dependencies_parsed_at":"2023-01-21T00:47:55.191Z","dependency_job_id":null,"html_url":"https://github.com/Aashu-Dubey/react-native-rating-bar","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aashu-Dubey%2Freact-native-rating-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aashu-Dubey%2Freact-native-rating-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aashu-Dubey%2Freact-native-rating-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aashu-Dubey%2Freact-native-rating-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aashu-Dubey","download_url":"https://codeload.github.com/Aashu-Dubey/react-native-rating-bar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239141505,"owners_count":19588624,"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","library","npm","package","ratingbar","ratings","react-native","react-native-rating-bar","reviews","vector-icons"],"created_at":"2025-02-16T14:38:36.154Z","updated_at":"2025-10-31T07:31:47.554Z","avatar_url":"https://github.com/Aashu-Dubey.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n    React Native Rating Bar\n\u003c/h1\u003e\n\nA React Native component for generating and displaying interactive Tap or Swipe enabled Ratings supporting custom icons from [vector icons](https://github.com/oblador/react-native-vector-icons) and images.\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm](https://img.shields.io/npm/v/@aashu-dubey/react-native-rating-bar?style=flat-square)](https://www.npmjs.com/package/@aashu-dubey/react-native-rating-bar) [![Install Size](https://packagephobia.now.sh/badge?p=@aashu-dubey/react-native-rating-bar)](https://www.npmjs.com/package/@aashu-dubey/react-native-rating-bar)\n\n[Installation](#-installation) • [Usage](#-usage) • [Examples](#-examples) • [Demo](./example)\n\n\u003c/div\u003e\n\n## 🚀 Installation\n\nInstall the package using yarn or npm:\n\n```sh\nyarn add @aashu-dubey/react-native-rating-bar\n```\n\nOr\n\n```sh\nnpm install --save @aashu-dubey/react-native-rating-bar\n```\n\nAnd you also need to install [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler), as we're using it for Swipe/Tap gestures:\n\n```sh\nyarn add react-native-gesture-handler\n```\n\nthen wrap your App's entry point with `GestureHandlerRootView` (see [official doc](https://docs.swmansion.com/react-native-gesture-handler/docs/next/installation#js)) in order for drag to rate feature to work\n\n```JSX\nexport default function App() {\n  return (\n    \u003cGestureHandlerRootView style={{ flex: 1 }}\u003e\n      {/* content */}\n    \u003c/GestureHandlerRootView\u003e\n  );\n}\n```\n\nFor more info see gesture-handler's [official Installation guide](https://docs.swmansion.com/react-native-gesture-handler/docs/installation)\n\n## 💪🏼 Usage\n\n### Props\n\n#### RatingBar\n\n| prop                                                     | default                   | type                                             | description                                                                                                                                                                                                                                                                                                                                                            |\n| -------------------------------------------------------- | ------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003cspan id=\"tableRateStylesProp\"\u003erateStyles\u003c/span\u003e         | undefined                 | object ([RateStyles](#ratestyless-object))       | Provide custom styles for View containing whole rating group or single rating item.                                                                                                                                                                                                                                                                                    |\n| itemCount                                                | 5                         | number                                           | Total number of Rating items to display.                                                                                                                                                                                                                                                                                                                               |\n| minRating                                                | 0                         | number                                           | Minimum rating value allowed. Should be `\u003e= 0`                                                                                                                                                                                                                                                                                                                         |\n| maxRating                                                | `itemCount`               | number                                           | Miximum rating value allowed. Should be `\u003e= minRating \u003e= 0`                                                                                                                                                                                                                                                                                                            |\n| layoutDirection                                          | device's layout direction | 'ltr' or 'rtl'                                   | Layout Direction to show the ratings on, left-to-right (`ltr`) or right-to-left (`rtl`)                                                                                                                                                                                                                                                                                |\n| unratedColor                                             | 'rgba(0, 0, 0, 0.38)'     | string (ColorValue)                              | Color for items that are not rated yet, usually when `index \u003e= rating`.                                                                                                                                                                                                                                                                                                |\n| \u003cspan id=\"tableAllowHalfRating\"\u003eallowHalfRating\u003c/span\u003e   | false                     | boolean                                          | If `true`, rating will increase/decrease by fraction of `0.5` instead of default `1`.                                                                                                                                                                                                                                                                                  |\n| \u003cspan id=\"tableDirectionProp\"\u003edirection\u003c/span\u003e           | 'horizontal'              | 'horizontal' \\| 'vertical' \\| 'vertical-reverse' | Direction to show the ratings items in                                                                                                                                                                                                                                                                                                                                 |\n|                                                          |                           | 'horizontal'                                     | shows the rating items horizontally. To see them in reverse horizontally set `layoutDirection=\"rtl\"`                                                                                                                                                                                                                                                                   |\n|                                                          |                           | 'vertical'                                       | Shows the rating items vertically, top to bottom.                                                                                                                                                                                                                                                                                                                      |\n|                                                          |                           | 'vertical-reverse'                               | Shows the rating itmes vertically, bottom to top.                                                                                                                                                                                                                                                                                                                      |\n| glow                                                     | true                      | boolean                                          | If true, Rating items will glow when being touched or dragged.\u003cbr\u003e\u003cbr\u003eNote:- iOS only                                                                                                                                                                                                                                                                                  |\n| glowColor                                                | '#FFC107'                 | string (ColorValue)                              | Defines color for glow                                                                                                                                                                                                                                                                                                                                                 |\n| glowRadius                                               | 2                         | number                                           | Defines the radius of glow                                                                                                                                                                                                                                                                                                                                             |\n| ignoreGestures                                           | false                     | boolean                                          | Ignore user gestures to make rating bar view only\u003cbr\u003eAlternatively you can use `RatingBarIndicator` component.                                                                                                                                                                                                                                                         |\n| initialRating                                            | 0                         | number                                           | Defines the initial rating to be set to the rating bar.                                                                                                                                                                                                                                                                                                                |\n| itemPadding                                              | 0                         | number                                           | The amount of space by which to inset each rating item.                                                                                                                                                                                                                                                                                                                |\n| itemSize                                                 | 40                        | number                                           | Defines width and height of each rating item in the bar.                                                                                                                                                                                                                                                                                                               |\n| tapOnlyMode                                              | false                     | boolean                                          | If `true`, will disable drag to rate feature and only allow taps to change ratings.                                                                                                                                                                                                                                                                                    |\n| \u003cspan id=\"tableUpdateOnDragProp\"\u003eupdateOnDrag\u003c/span\u003e     | false                     | boolean                                          | Defines whether or not the [`onRatingUpdate`](#tableOnRatingUpdateProp) updates while dragging.                                                                                                                                                                                                                                                                        |\n| useSolution                                              | 1                         | 1 or 2 (number)                                  | There are two implemented solutions for the drag to rate feature, choose whichever works best for you.\u003cbr\u003e\u003cbr\u003eYou won't usually notice any difference, unless ratings are vertical, see [`direction`](#tableDirectionProp) props.                                                                                                                                      |\n| \u003cspan id=\"tableOnRatingUpdateProp\"\u003eonRatingUpdate\u003c/span\u003e | undefined                 | function(rating: number)                         | Return current rating whenever rating is updated.\u003cbr\u003e\u003cbr\u003e[`updateOnDrag`](#tableUpdateOnDragProp) can be used to change the behaviour how the callback reports the update.\u003cbr\u003eBy Default it only returns update when the touch ends, either when tapping or dragging.                                                                                                  |\n| \u003cspan id=\"tableRatingView\"\u003eratingView\u003c/span\u003e             | undefined                 | object ([RatingView](#ratingviews-object))       | Properties for rating view that updates with current rating.\u003cbr\u003eBy default it shows `Rating: {rating} / {itemCount}`                                                                                                                                                                                                                                                   |\n| \u003cspan id=\"tableItemBuilder\"\u003eitemBuilder\u003cspan\u003e            | undefined                 | function(index: number) =\u003e JSX.Element           | Function to return your custom components to be used as rating items, usually Image or Icon component from [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).\u003cbr\u003eYou can either pass single component or different components based on `index` property from param.\u003cbr\u003e\u003cbr\u003eindex - Provides Rating bar item's index position as param. |\n| \u003cspan id=\"tableRatingElement\"\u003eratingElement\u003c/span\u003e       | undefined                 | object ([RatingElement](#ratingelements-object)) | Define 3 different states of rating.\u003cbr\u003e`empty`, `half` and `full`.                                                                                                                                                                                                                                                                                                    |\n\n##### [`ratingElement`'s Object](#tableRatingElement)\n\n- | key   | type        | description                                                                                                                                                                |\n  | ----- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n  | empty | JSX.Element | Defines Element to be used as rating bar item when item is unrated.                                                                                                        |\n  | half  | JSX.Element | Defines Element to be used when as rating bar item when only half portion of item is rated.\u003cbr\u003e**Note**:- [allowHalfRating](#tableAllowHalfRating) needs to be set to true |\n  | full  | JSX.Element | Defines Element to be used when as rating bar item when item is completely rated.                                                                                          |\n\n##### [`rateStyles`'s Object](#tableRateStylesProp)\n\n- | key           | type                                                            | description                                          |\n  | ------------- | --------------------------------------------------------------- | ---------------------------------------------------- |\n  | container     | object (ViewStyle)                                              | Custom styles for View contaning whole rating group. |\n  | starContainer | object (ViewStyle) \\| ((index: number) =\u003e StyleProp\u003cViewStyle\u003e) | Custom styles for View contaning Sigle rating item.  |\n\n##### [`ratingView`'s Object](#tableRatingView)\n\n- | key            | type               | description                                                                                                                                                                                                                                |\n  | -------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n  | showRating     | boolean            | Whether to show Rating indicator. By default view doesn't show.                                                                                                                                                                            |\n  | position       | 'top' \\| 'bottom'  | Whether to show indicator on `top` or `bottom` of Rating bar. By default it shows on `top`.                                                                                                                                                |\n  | titleText      | string             | Custom title that shows at the start, before `{currentRating} / {itemCount}`.\u003cbr\u003eDefault is `\"Rating: \"`.                                                                                                                                  |\n  | containerStyle | object (ViewStyle) | Style for main view container.                                                                                                                                                                                                             |\n  | titleStyle     | object (TextStyle) | Style for text showing before ratings, at the start.                                                                                                                                                                                       |\n  | ratingStyle    | object (TextStyle) | Style for text showing current rating.                                                                                                                                                                                                     |\n  | totalStyle     | object (TextStyle) | Style for text showing total allowed rating.                                                                                                                                                                                               |\n  | custom         | ReactElement       | Pass custom component replacing the default one, can be emoji, image or text etc.\u003cbr\u003ePassing this will make above props irrelevent, except `showRating` and `position`.\u003cbr\u003e\u003cbr\u003eNote:- You have to handle updates based on rating yourself. |\n\n\u003e **Note**:- To make the component work you must pass either of `itemBuilder` or `ratingElement` with valid values.\n\n#### RatingBarIndicator\n\nThis is view only alternative to `RatingBar` with no Tap or Swipe capability and From above props **RatingBarIndicator** contains `layoutDirection`, `unratedColor`, `direction`, `itemCount`, `itemPadding`, `itemSize`, `rating` and `itemBuilder` with same specific uses.\n\n### 📲 Examples\n\n#### Using RatingBar Component\n\nThere are few different ways to use Rating Bar component\n\n###### Using [`ratingElement`](#tableRatingElement) prop:\n\n\u003cimg width=\"248\" alt=\"image\" src=\"https://user-images.githubusercontent.com/86477859/169906569-f937a04a-0bbc-40b9-ad79-6eaefcb58c0c.png\"\u003e\n\n```JSX\n\u003cRatingBar\n  initialRating={3.5}\n  direction=\"horizontal\"\n  allowHalfRating\n  itemCount={5}\n  itemPadding={4}\n  ratingElement={{\n    full: (\n      \u003cImage\n        style={{ width: 30, height: 30, tintColor: '#54D3C2' }}\n        resizeMode=\"contain\"\n        source={require('./assets/heart.png')}\n      /\u003e\n    ),\n    half: (\n      \u003cImage\n        style={{ width: 30, height: 30, tintColor: '#54D3C2' }}\n        resizeMode=\"contain\"\n        source={require('./assets/heart_half.png')}\n      /\u003e\n    ),\n    empty: (\n      \u003cImage\n        style={{ width: 30, height: 30, tintColor: '#54D3C2' }}\n        resizeMode=\"contain\"\n        source={require('./assets/heart_border.png')}\n      /\u003e\n    ),\n  }}\n  onRatingUpdate={value =\u003e console.log(value)}\n/\u003e\n```\n\nAssets are available [here](./example/src/assets).\u003cbr\u003e\nOr you can use Icon component from [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons):\n\n\u003cimg width=\"248\" alt=\"image\" src=\"https://user-images.githubusercontent.com/86477859/169905930-0fbdd3d0-df05-4e87-b328-79f891ec0e7a.png\"\u003e\n\n```JSX\n\u003cRatingBar\n  initialRating={3.5}\n  direction=\"horizontal\"\n  allowHalfRating\n  itemCount={5}\n  itemPadding={4}\n  ratingElement={{\n    full: \u003cIcon name=\"star-rate\" color=\"#54D3C2\" size={40} /\u003e,\n    half: \u003cIcon name=\"star-half\" color=\"#54D3C2\" size={40} /\u003e,\n    empty: \u003cIcon name=\"star-border\" color=\"#54D3C2\" size={40} /\u003e,\n  }}\n  onRatingUpdate={value =\u003e console.log(value)}\n/\u003e\n```\n\n###### Using [`itemBuilder`](#tableItemBuilder) prop:\n\n\u003cimg width=\"248\" alt=\"image\" src=\"https://user-images.githubusercontent.com/86477859/169903719-224b225e-e45b-4dec-b4b8-3b0d4230e709.png\"\u003e\n\n```JSX\n\u003cRatingBar\n  initialRating={2.5}\n  minRating={1}\n  direction=\"horizontal\"\n  allowHalfRating\n  unratedColor=\"rgba(255, 193, 7, 0.2)\"\n  itemCount={5}\n  itemPadding={4}\n  itemSize={40}\n  itemBuilder={() =\u003e \u003cIcon name=\"star\" color=\"#FFC107\" size={40} /\u003e}\n  onRatingUpdate={value =\u003e console.log(value)}\n/\u003e\n```\n\n###### Based on [`itemBuilder`](#tableItemBuilder) prop's index param:\n\nPassing different component in `itemBuilder` based on index param value:\n\n\u003cimg width=\"248\" alt=\"image\" src=\"https://user-images.githubusercontent.com/86477859/169907826-2388a362-b5fe-457c-9573-f749c2014c6a.png\"\u003e\n\n```JSX\n\u003cRatingBar\n  initialRating={3}\n  itemCount={5}\n  itemPadding={4}\n  itemBuilder={index =\u003e {\n    switch (index) {\n      case 0:\n        return (\n          \u003cIcon name=\"sentiment-very-dissatisfied\" color=\"#F44336\" size={40} /\u003e\n        );\n      case 1:\n        return \u003cIcon name=\"sentiment-dissatisfied\" color=\"#FF5252\" size={40} /\u003e;\n      case 2:\n        return \u003cIcon name=\"sentiment-neutral\" color=\"#FFC107\" size={40} /\u003e;\n      case 3:\n        return \u003cIcon name=\"sentiment-satisfied\" color=\"#8BC34A\" size={40} /\u003e;\n      case 4:\n        return (\n          \u003cIcon name=\"sentiment-very-satisfied\" color=\"#4CAF50\" size={40} /\u003e\n        );\n      default:\n        return \u003cView /\u003e;\n    }\n  }}\n  onRatingUpdate={value =\u003e console.log(value)}\n/\u003e\n```\n\n#### Using `RatingBarIndicator` Component\n\n\u003cimg width=\"248\" alt=\"image\" src=\"https://user-images.githubusercontent.com/86477859/169963092-a600f105-5d7c-458f-9bb6-862175d5f840.png\"\u003e\n\n```JSX\n\u003cRatingBarIndicator\n  rating={3.37}\n  itemBuilder={() =\u003e \u003cIcon name=\"star\" color=\"#FFC107\" /\u003e}\n  itemCount={5}\n  itemSize={50}\n  unratedColor=\"rgba(255, 193, 7, 0.2)\"\n  direction=\"horizontal\" // Or \"vertical\", \"vertical-reverse\"\n/\u003e\n```\n\n#### Vertical Mode\n\n| \u003cimg width=\"154\" alt=\"image\" src=\"https://user-images.githubusercontent.com/86477859/169964817-4cfbb2d6-1c15-4769-8099-23cd450a0d8f.png\"\u003e | \u003cimg width=\"154\" alt=\"image\" src=\"https://user-images.githubusercontent.com/86477859/169964900-1e8d3a8e-b3fd-45ac-9d2d-3a80ce219205.png\"\u003e |\n| :---------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: |\n|                                                              \u003cb\u003evertical\u003c/b\u003e                                                              |                                                          \u003cb\u003evertical-reverse\u003c/b\u003e                                                          |\n\n## 🚧 Issue\n\nYou may notice, especially in Android drag to rate is a little slower, this is a dev only problem, if you run your build on release mode or even debug with JS dev mode disabled it will run way way faster, something related to [this](https://github.com/facebook/hermes/issues/48).\nThat being said, I'm trying to fix this.\n\n## 🌻 Motivation\n\nThis project was initially started as I needed to implement a rating component for [Hotel Booking UI](https://github.com/Aashu-Dubey/React-Native-UI-Templates/blob/main/react_native_UI_Templates/res/hotel/hotel_booking.png) template in my other open source project for learning [React-Native-UI-Templates](https://github.com/Aashu-Dubey/React-Native-UI-Templates), and failing to find a proper solution that works same as the original Project in Flutter, I decided to replicate the Rating library used in the Flutter project.\u003cbr\u003e\nSo this package is initially inspired from Flutter package [flutter_rating_bar](https://github.com/sarbagyastha/flutter_rating_bar) (including the demo 😅) with some extra added functionalities.\n\n## 🙋‍♀️ Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## 📜 License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faashu-dubey%2Freact-native-rating-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faashu-dubey%2Freact-native-rating-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faashu-dubey%2Freact-native-rating-bar/lists"}