{"id":4006,"url":"https://github.com/ui-ninja/react-native-rating-element","last_synced_at":"2025-08-04T00:30:54.634Z","repository":{"id":38856981,"uuid":"270139332","full_name":"ui-ninja/react-native-rating-element","owner":"ui-ninja","description":"A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.","archived":false,"fork":false,"pushed_at":"2023-01-26T22:32:30.000Z","size":2423,"stargazers_count":24,"open_issues_count":18,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-27T05:12:42.445Z","etag":null,"topics":["decimal-point-rating","ionicons","rating","ratings","react-native","star-rating","star-rating-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ui-ninja.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}},"created_at":"2020-06-06T23:58:13.000Z","updated_at":"2025-04-21T20:33:21.000Z","dependencies_parsed_at":"2023-02-06T04:16:35.070Z","dependency_job_id":null,"html_url":"https://github.com/ui-ninja/react-native-rating-element","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/ui-ninja/react-native-rating-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-ninja%2Freact-native-rating-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-ninja%2Freact-native-rating-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-ninja%2Freact-native-rating-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-ninja%2Freact-native-rating-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ui-ninja","download_url":"https://codeload.github.com/ui-ninja/react-native-rating-element/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-ninja%2Freact-native-rating-element/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268310792,"owners_count":24230185,"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","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["decimal-point-rating","ionicons","rating","ratings","react-native","star-rating","star-rating-component"],"created_at":"2024-01-05T20:16:58.265Z","updated_at":"2025-08-04T00:30:54.119Z","avatar_url":"https://github.com/ui-ninja.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"\u003ch1 align=\"center\"\u003e\n    React Native Rating Element\n\u003c/h1\u003e\n\nA simple rating library for react native supporting:\n\n- **a11y ready** ⚛️\n- **decimal points** like 3.7, 4.2 etc,\n- **direction aware** icons (like you can pass direction as “column” or “row-reverse”),\n- **custom icon set** from Ionicons,\n- **custom images** (You can add any suitable image as per your wish),\n- and **interact and record rating** given by users.\n\n\u003ch3 align=\"center\"\u003e\n  \u003ca href=\"https://github.com/ui-ninja/react-native-rating-element#installation\"\u003eInstallation\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"https://github.com/ui-ninja/react-native-rating-element#usage\"\u003eUsage\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"https://github.com/ui-ninja/react-native-rating-element#api\"\u003eAPI Documentation\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"https://github.com/ui-ninja/react-native-rating-element#output\"\u003eSample Output\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n\u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://s7.gifyu.com/images/ratingV5.1.3.gif\" width=\"200\" /\u003e\n\u003c/div\u003e\n\n\u003e Please note: This package depends on [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons#installation). Please configure it for iOS and android before using this package. \u003cbr /\u003e - For iOS, you will need to add `Ionicons.ttf` file from `node_modules/react-native-vector-icons` to `Fonts` folder and then edit `Info.plist`. [Try this article](https://medium.com/@vimniky/how-to-use-vector-icons-in-your-react-native-project-8212ac6a8f06) \u003cbr /\u003e - For android - Please follow [these instruction](https://github.com/oblador/react-native-vector-icons#option-with-gradle-recommended).\n\n## Installation\n\nUse the package manager npm to install react-native-rating-element.\n\n```bash\nnpm install react-native-rating-element\n```\n\n## Usage\n\n```javascript\nimport { Rating } from \"react-native-rating-element\";\n\n\u003cRating\n  rated={3.7}\n  totalCount={5}\n  ratingColor=\"#f1c644\"\n  ratingBackgroundColor=\"#d4d4d4\"\n  size={24}\n  readonly // by default is false\n  icon=\"ios-star\"\n  direction=\"row\" // anyOf[\"row\" (default), \"row-reverse\", \"column\", \"column-reverse\"]\n/\u003e\n\n**Custom Image, onIconTap and bottom to top direction**\n\u003cRating\n  rated={3.7}\n  totalCount={5}\n  size={42}\n  onIconTap={position =\u003e console.log(`User pressed: ${position}`)}\n  direction=\"column-reverse\"\n  type=\"custom\" // default is always to \"icon\"\n  selectedIconImage={require('./filled.png')}\n  emptyIconImage={require('./empty.png')}\n/\u003e\n\n```\n\n## API\n\n| prop                      | default    | type              | description                                                                                                                                                                                                                                                                      |\n| ------------------------- | ---------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `rated`                   | 0          | number            | Represents Initial value for the rating.                                                                                                                                                                                                                                         |\n| `totalCount`              | 5          | number            | Number of background stars to show. For ex. Rated 5 out of 10 stars. The 10 value is `totalCount`                                                                                                                                                                                |\n| `type`                    | `icon`     | string            | If you want custom images, then pass `custom` as prop value. \u003cbr /\u003eIn case of `custom`, Make sure to pass `selectedIconImage` and `emptyIconImage`.                                                                                                                              |\n| `selectedIconImage`       | -          | image path (node) | Pass in custom path for selected icon. For ex. `selectedIconImage={require('../pathToImage/image.png}`.                                                                                                                                                                          |\n| `emptyIconImage`          | -          | image path (node) | Pass in custom path for selected icon. For ex. `emptyIconImage={require('../pathToImage/image.png}`.                                                                                                                                                                             |\n| `readonly`                | false      | bool              | If passed true, `onIconTap` event won't be fired.                                                                                                                                                                                                                                |\n| `direction`               | 'row'      | string            | Pass any value from `[ \"row\", \"row-reverse\", \"column\", \"column-reverse\"]`.                                                                                                                                                                                                       |  |\n| `onIconTap`               | -          | func              | On press of star icon by user, this function will be invoked with `position` paramter. For ex. when user taps on 4 rating, this function will be invoked and in `position` parameter you will get value 4. Please note: This won't be triggered if `readonly` is passed as true. |\n| `ratingColor`             | #f1c644    | string (color)    | Pass in a custom color to fill-color the rating icon.                                                                                                                                                                                                                            |\n| `ratingBackgroundColor`   | #d4d4d4    | string (color)    | Pass in a custom fill-color for the background of rating icon. It is sometimes referred as empty icon.                                                                                                                                                                           |\n| `size`                    | 24         | number            | Pass in a custom font size for the icon                                                                                                                                                                                                                                          |\n| `icon`                    | 'ios-star' | string            | Pass in a custom text for the icon. For ex. 'beer', 'bulb'. These icons are imported from package [react-native-vector-icons](https://oblador.github.io/react-native-vector-icons/). Please Note: For now this package only support Ionicons                                     |\n| `marginBetweenRatingIcon` | 1          | number            | Pass in custom number to manage space or margin between the rating icons.                                                                                                                                                                                                        |\n\n## Output\n\n![Output](https://s7.gifyu.com/images/ratingV5.1.3.gif)\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-ninja%2Freact-native-rating-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fui-ninja%2Freact-native-rating-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-ninja%2Freact-native-rating-element/lists"}