react-native-grading

react-native-grading is a RN component for users to grade scores. Four modes are supplied by the component, `arcs`/`simles`/`stars`/`board`.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-grading
1.0.36 years ago6 years agoMinified + gzip package size for react-native-grading in KB

Readme

react-native-grading Build Status Coverage Status

react-native-grading is a RN component for users to grade scores. Four modes are supplied by the component, arcs/simles/stars/board.

Before Using: Link ART in Xcode

Using this component directly in your project may encounter the following error:
No component found for view with name "ARTSurfaceView"

First find ART.xcdoeproj from your-project/node_modules/react-native/Libraies/ART/ART.xcdoeproj and drag it into Xcode your-project/Libraries.
Then turn to the project's General Settings and add libART.a into the Linked Frameworks and Libraries list.
Finally, press cmd + B to rebuild project.

Usage

install from npm
npm install --save react-native-grading

import in project (Insure libART.a is linked)
import Grading from 'react-native-grading';

board mode (Default)
<Grading score={4.0} num={72346} fontColor="#552da6" readOnly={true}/>

stars mode
<Grading
  mode="stars"
  scale={2.4}
  score={this.state.stars.score}
  scoreBase={10}
  activeColor={customActiveColor}
  defaultColor={customDefaultColor}
  onGrading={this.changeStarScore}
/>

arcs mode
<Grading
  mode="arcs"
  score={this.state.arcs.score}
  scoreBase={10}
  activeColor="#2bb8aa"
  scale={1.2}
  onGrading={this.changeArcScore}
  name="Creativity"
  enable={true}
/>

smiles mode
<Grading mode="smiles" scale={1.2} activeColor="#d23f2b" isLike={this.state.simles.isLike} readOnly={true}/>

Properties

| Property | Default | Type | Description | | --- | --- | --- | --- | | mode | ‘board' | string | Grading mode, oneOf‘board’, ‘arcs’, ’stars’, ’smiles' | | enable | true | bool | whether the grading component is interactive | | readOnly | false | bool | whether the component is read only | | 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. | | scoreBase | 5 | number | In arcs mode, it’s set 100 automatically when isPercentage=true; In board mode, scoreBase is always 5. | | onGrading | - | function | Callback function of grading component, the first argument is the score graded by user. In smile mode, the argument is     bool type.  | | num | 0 | number | The times of grading, board mode only. | | name | '' | string | The title of arc, arcs mode only. | | isPercentage | false | bool | Whether component displays percentage, arcs mode only. | | activeColor | ACTIVECOLOR | string | The main color used in the component, ACTIVE_COLOR is defined in Constants file. | | defaultColor | DEFAULTCOLOR | string | The default color used in the component, DEFAULT_COLOR is defined in Constants file. | | fontColor | FONTCOLOR | string | The font color used in the component. FONT_COLOR is defined in Constants file. | | cancelText | ‘Cancel' | string | The text of grading modal’s cancel button. Enable in arcs or board mode both. | | confirmText | ‘Confirm' | string | The text of grading modal’s confirm button. Enable in arcs or board mode both. | | cancelTextStyle | {} | object | Custom style for cancel button text of modal. Enable in arcs or board mode both. | | confirmTextStyle | {} | object | Custom style for confirm button text of modal. Enable in arcs or board mode both. | | cancelButtonStyle | {} | object | Custom style for cancel button of modal. Enable in arcs or board mode both. | | confirmButtonStyle | {} | object | Custom style for confirm button text of modal. Enable in arcs or board mode both. |

Methods

Please use refs to invoke the following instance methods.
| Method | Params | Description | | --- | --- | --- | | openGradingModal | - | Manually open the grading modal. Enabled in arcs mode and board mode both |