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.

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 | ACTIVE_COLOR | string | The main color used in the component, ACTIVE_COLOR is defined in Constants file. | | defaultColor | DEFAULT_COLOR | string | The default color used in the component, DEFAULT_COLOR is defined in Constants file. | | fontColor | FONT_COLOR | 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 |