{"id":4221,"url":"https://github.com/xgfe/react-native-grading","last_synced_at":"2026-03-10T21:32:30.078Z","repository":{"id":57337370,"uuid":"77355221","full_name":"xgfe/react-native-grading","owner":"xgfe","description":"A React Native grading component using ReactART.","archived":false,"fork":false,"pushed_at":"2017-01-21T04:25:45.000Z","size":897,"stargazers_count":55,"open_issues_count":0,"forks_count":0,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-12-19T00:00:13.233Z","etag":null,"topics":[],"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/xgfe.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":"2016-12-26T03:26:59.000Z","updated_at":"2025-09-21T05:55:28.000Z","dependencies_parsed_at":"2022-09-13T02:32:05.300Z","dependency_job_id":null,"html_url":"https://github.com/xgfe/react-native-grading","commit_stats":null,"previous_names":["tinysymphony/react-native-score","tinysymphony/react-native-grading"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/xgfe/react-native-grading","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-grading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-grading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-grading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-grading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xgfe","download_url":"https://codeload.github.com/xgfe/react-native-grading/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xgfe%2Freact-native-grading/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30355648,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T15:55:29.454Z","status":"ssl_error","status_checked_at":"2026-03-10T15:54:58.440Z","response_time":106,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-01-05T20:17:04.923Z","updated_at":"2026-03-10T21:32:30.048Z","avatar_url":"https://github.com/xgfe.png","language":"JavaScript","readme":"## react-native-grading [![Build Status](https://travis-ci.org/xgfe/react-native-grading.svg?branch=master)](https://travis-ci.org/xgfe/react-native-grading) [![Coverage Status](https://coveralls.io/repos/github/Tinysymphony/react-native-grading/badge.svg?branch=master)](https://coveralls.io/github/Tinysymphony/react-native-grading?branch=master)\n\nreact-native-grading is a RN component for users to grade scores. Four modes are supplied by the component, `arcs`/`simles`/`stars`/`board`.\n\n## Example.gif\n\n\u003e  There are at least 3 examples for each mode in order to show component in different status. In every test group, the first grading component is enabled, the second one is read only, the third one is disabled.\n\n\u003ca href=\"#ios-test\" id=\"ios-test\"\u003e\u003cimg src=\"./GIF/ios.gif\"  align=\"left\" width=\"200\"\u003e\u003c/a\u003e\n\n\n\u003ca href=\"#ios\" id=\"ios\"\u003e\u003cimg src=\"./GIF/android.gif\" width=\"200\"/\u003e\u003c/a\u003e\n\n\n\u003cp\u003e\u003c/p\u003e\n\n\n## Before Using: Link ART in Xcode\nUsing this component directly in your project may encounter the following error:\n\u003e No component found for view with name \"ARTSurfaceView\"\n\nFirst find `ART.xcdoeproj` from `your-project/node_modules/react-native/Libraies/ART/ART.xcdoeproj` and drag it into Xcode `your-project/Libraries`.\n\nThen turn to the project's General Settings and add `libART.a` into the **`Linked Frameworks and Libraries`** list.\n\nFinally, press cmd + B to rebuild project.\n\n\n## Usage\n\n**install from npm**\n\n```shell\nnpm install --save react-native-grading\n```\n\n**import in project (Insure libART.a is linked)**\n\n```js\nimport Grading from 'react-native-grading';\n```\n\n**board mode (Default)**\n\n```html\n\u003cGrading score={4.0} num={72346} fontColor=\"#552da6\" readOnly={true}/\u003e\n```\n\n**stars mode**\n\n```html\n\u003cGrading\n  mode=\"stars\"\n  scale={2.4}\n  score={this.state.stars.score}\n  scoreBase={10}\n  activeColor={customActiveColor}\n  defaultColor={customDefaultColor}\n  onGrading={this.changeStarScore}\n/\u003e\n```\n\n**arcs mode**\n\n```html\n\u003cGrading\n  mode=\"arcs\"\n  score={this.state.arcs.score}\n  scoreBase={10}\n  activeColor=\"#2bb8aa\"\n  scale={1.2}\n  onGrading={this.changeArcScore}\n  name=\"Creativity\"\n  enable={true}\n/\u003e\n```\n\n**smiles mode**\n\n```html\n\u003cGrading mode=\"smiles\" scale={1.2} activeColor=\"#d23f2b\" isLike={this.state.simles.isLike} readOnly={true}/\u003e\n```\n\n\n## Properties\n\n\n| Property | Default | Type | Description |\n| --- | --- | --- | --- |\n| mode | ‘board' | string | Grading mode, oneOf[‘board’, ‘arcs’, ’stars’, ’smiles'] |\n| enable | true | bool | whether the grading component is interactive |\n| readOnly | false | bool | whether the component is read only |\n| score | 0 | number | current score. In board mode, it’s current average score; In arcs mode, score can be a percentage when `isPercentage` is set `true` (eg. 45 stands for 45%); for smiles mode, it’s meaningless. |\n| scoreBase | 5 | number | In arcs mode, it’s set 100 automatically when `isPercentage=true`; In board mode, scoreBase is always 5. |\n| onGrading | - | function | Callback function of grading component, the first argument is the score graded by user. In smile mode, the argument is     bool type.  |\n| num | 0 | number | The times of grading, board mode only. |\n| name | '' | string | The title of arc, arcs mode only. |\n| isPercentage | false | bool | Whether component displays percentage, arcs mode only. |\n| activeColor | ACTIVE_COLOR | string | The main color used in the component, `ACTIVE_COLOR` is defined in Constants file. |\n| defaultColor | DEFAULT_COLOR | string | The default color used in the component, `DEFAULT_COLOR` is defined in Constants file. |\n| fontColor | FONT_COLOR | string | The font color used in the component. `FONT_COLOR` is defined in Constants file. |\n| cancelText | ‘Cancel' | string | The text of grading modal’s cancel button. Enable in arcs or board mode both. |\n| confirmText | ‘Confirm' | string | The text of grading modal’s confirm button. Enable in arcs or board mode both. |\n| cancelTextStyle | {} | object | Custom style for cancel button text of modal. Enable in arcs or board mode both. |\n| confirmTextStyle | {} | object | Custom style for confirm button text of modal. Enable in arcs or board mode both. |\n| cancelButtonStyle | {} | object | Custom style for cancel button of modal. Enable in arcs or board mode both. |\n| confirmButtonStyle | {} | object | Custom style for confirm button text of modal. Enable in arcs or board mode both. |\n\n## Methods\n\nPlease use refs to invoke the following instance methods.\n\n| Method | Params | Description |\n| --- | --- | --- |\n| openGradingModal | - | Manually open the grading modal. Enabled in arcs mode and board mode both |\n","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxgfe%2Freact-native-grading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxgfe%2Freact-native-grading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxgfe%2Freact-native-grading/lists"}