{"id":4005,"url":"https://github.com/djchie/react-native-star-rating","last_synced_at":"2025-05-15T03:05:11.487Z","repository":{"id":2425829,"uuid":"46536356","full_name":"djchie/react-native-star-rating","owner":"djchie","description":"A React Native component for generating and displaying interactive star ratings","archived":false,"fork":false,"pushed_at":"2023-05-15T09:33:34.000Z","size":1645,"stargazers_count":832,"open_issues_count":58,"forks_count":205,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-05-15T03:04:51.405Z","etag":null,"topics":["component","custom-star","rating","ratings","react-native","react-native-component","react-native-star-rating","star","star-icon","star-rating","star-rating-component"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/djchie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-11-20T03:19:17.000Z","updated_at":"2025-05-14T08:22:51.000Z","dependencies_parsed_at":"2023-07-05T18:31:47.400Z","dependency_job_id":null,"html_url":"https://github.com/djchie/react-native-star-rating","commit_stats":{"total_commits":109,"total_committers":20,"mean_commits":5.45,"dds":0.3486238532110092,"last_synced_commit":"b5d94be64ac34e41252a6b6947daa10dc844d673"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djchie%2Freact-native-star-rating","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djchie%2Freact-native-star-rating/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djchie%2Freact-native-star-rating/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djchie%2Freact-native-star-rating/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/djchie","download_url":"https://codeload.github.com/djchie/react-native-star-rating/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264765,"owners_count":22041793,"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":["component","custom-star","rating","ratings","react-native","react-native-component","react-native-star-rating","star","star-icon","star-rating","star-rating-component"],"created_at":"2024-01-05T20:16:58.235Z","updated_at":"2025-05-15T03:05:11.467Z","avatar_url":"https://github.com/djchie.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript","Others"],"sub_categories":["UI"],"readme":"[![npm version](https://badge.fury.io/js/react-native-star-rating.svg)](https://badge.fury.io/js/react-native-star-rating)\n\n[![NPM](https://nodei.co/npm/react-native-star-rating.png?downloads=true)](https://nodei.co/npm/react-native-star-rating/)\n\n# React Native Star Rating Component\n\n\u003e A React Native component for generating and displaying interactive star ratings. Compatible with both iOS and Android.\n\n## Table of Contents\n\n1. [Installation](#installation)\n1. [Usage](#usage)\n  1. [Props](#props)\n  1. [General Star Example](#general-star-example)\n  1. [Custom Star Example](#custom-star-example)\n1. [Roadmap](#roadmap)\n1. [Contributing](#contributing)\n\n## Installation\n\n1. install react-native-star-rating and its dependeices\n```sh\nnpm install react-native-star-rating --save\n```\nor\n```sh\nyarn add react-native-star-rating\n```\n2. link `react-native-vector-icons`   \nplease refer to [react-native-vector-icons installation guide](https://github.com/oblador/react-native-vector-icons#installation)\n\n## Usage\n\n### Props\n\n|Prop|Type|Description|Required|Default|\n|---|---|---|---|---|\n|**`activeOpacity`**|`number`|Number between 0 a 1 to determine the opacity of the button.|`No`|`0.2`|\n|**`animation`**|`string`|Add an animation to the stars when upon selection. Refer to [react-native-animatable](https://github.com/oblador/react-native-animatable) for the different animation types.|`No`|`undefined`|\n|**`buttonStyle`**|`ViewPropTypes.style`|Style of the button containing the star.|`No`|*`{}`*|\n|**`containerStyle`**|`ViewPropTypes.style`|Style of the element containing the star rating component.|`No`|*`{}`*|\n|**`disabled`**|`bool`|Sets the interactivity of the star buttons. |`No`|`false`|\n|**`emptyStar`**|`string` or image `object`|The name of the icon to represent an empty star. Refer to [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons). Also can be a image object, both {uri:xxx.xxx} and require('xx/xx/xx.xxx').|`No`|`star-o`|\n|**`emptyStarColor`**|`string`|Color of an empty star. |`No`|`gray`|\n|**`fullStar`**|`string` or image `object`|The name of the icon to represent a full star. Refer to [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons). Also can be a image object, both {uri:xxx.xxx} and require('xx/xx/xx.xxx').|`No`|`star`|\n|**`fullStarColor`**|`string`|Color of a filled star. |`No`|`black`|\n|**`halfStar`**|`string` or image `object`|The name of the icon to represent an half star. Refer to [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).  Also can be a image object, both {uri:xxx.xxx} and require('xx/xx/xx.xxx').|`No`|`star-half-o`|\n|**`halfStarColor`**|`string`|Color of a half-filled star. Defaults to `fullStarColor`.|`No`|`undefined`|\n|**`halfStarEnabled`**|`bool`|Sets ability to select half stars|`No`|`false`|\n|**`iconSet`**|`string`|The name of the icon set the star image belongs to. Refer to [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).  |`No`|`FontAwesome`|\n|**`maxStars`**|`number`|The maximum number of stars possible. |`No`|`5`|\n|**`rating`**|`number`|The current rating to show.  |`No`|`0`|\n|**`reversed`**|`bool`|Renders stars from right to left|`No`|`false`|\n|**`selectedStar`**|`function`|A function to handle star button presses. |`Yes`|*`() =\u003e {}`*|\n|**`starSize`**|`number`|Size of the star. |`No`|`40`|\n|**`starStyle`**|`ViewPropTypes.style`|Style to apply to the star. |`No`|*`{}`*|\n\nFor the `emptyStar`, `fullStar`, `halfStar`, and `iconSet` props, please refer to the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) package for the valid `string` names for the star icons. When selecting the icon `string` names, you must remember to remove the font family name before the first hyphen. For example, if you want to use the `ion-ios-star` from the Ionicon font set, you would set the `fullStar` prop to `ios-star` and the `iconSet` to `Ionicons`.\n\nFor the `animation` prop, please refer to the [react-native-animatable](https://github.com/oblador/react-native-animatable) package for valid `string` names for the different animations available.\n\n### General Star Example\n\nThe following example will render 3.5 stars out of 5 stars using the `star-o` for the empty star icon, `star-half-o` for the half star icon, and `star` for the full star icon from the `FontAwesome` icon set in black color.\n\n```js\nimport StarRating from 'react-native-star-rating';\n\nclass GeneralStarExample extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      starCount: 3.5\n    };\n  }\n\n  onStarRatingPress(rating) {\n    this.setState({\n      starCount: rating\n    });\n  }\n\n  render() {\n    return (\n      \u003cStarRating\n        disabled={false}\n        maxStars={5}\n        rating={this.state.starCount}\n        selectedStar={(rating) =\u003e this.onStarRatingPress(rating)}\n      /\u003e\n    );\n  }\n}\n\nexport default GeneralStarExample\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/djchie/react-native-star-rating/blob/master/assets/general-star-demo.gif\" alt=\"General Star Example\" width=\"336\" height=\"600\"/\u003e\n\u003c/p\u003e\n\n### Custom Star Case\n\nThe following example will render 2.5 stars out of 7 stars using the `ios-star-outline` for the empty star icon, `ios-star-half` for the half star icon, and `ios-star` for the full star icon from the `Ionicons` icon set in red color.\n\n```js\nimport StarRating from 'react-native-star-rating';\n\nclass CustomStarExample extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      starCount: 2.5\n    };\n  }\n\n  onStarRatingPress(rating) {\n    this.setState({\n      starCount: rating\n    });\n  }\n\n  render() {\n    return (\n      \u003cStarRating\n        disabled={false}\n        emptyStar={'ios-star-outline'}\n        fullStar={'ios-star'}\n        halfStar={'ios-star-half'}\n        iconSet={'Ionicons'}\n        maxStars={7}\n        rating={this.state.starCount}\n        selectedStar={(rating) =\u003e this.onStarRatingPress(rating)}\n        fullStarColor={'red'}\n      /\u003e\n    );\n  }\n}\n\nexport default CustomStarExample\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/djchie/react-native-star-rating/blob/master/assets/custom-star-demo.gif\" alt=\"Custom Star Example\" width=\"336\" height=\"600\"/\u003e\n\u003c/p\u003e\n\n## Running the ExampleApp (WIP)\n\nNavigate to the root of the ExampleApp and install the dependencies\n\n```sh\ncd ExampleApp \u0026\u0026 npm install\n```\n\nRun the app on the iOS simulator.\n\n```sh\nnpm run ios\n```\n\n## Development Setup (WIP)\n\nBe sure to have `create-react-native-app` installed.\n\n```sh\nnpm install -g create-react-native-app\n```\n\nCreate a development app in the root folder.\n\n```sh\ncreate-react-native-app DevelopmentApp\n```\n\nGoing into the development app and clone this repo.\n\n```sh\ncd DevelopmentApp \u0026\u0026 git clone https://github.com/djchie/react-native-star-rating.git\n```\n\nGo into the `react-native-star-rating` directory and start developing!\n\n```sh\ncd react-native-star-rating\n```\n\n## Roadmap\n\nView the project roadmap [here](https://github.com/djchie/react-native-star-rating/issues)\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for contribution guidelines.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjchie%2Freact-native-star-rating","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdjchie%2Freact-native-star-rating","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjchie%2Freact-native-star-rating/lists"}