Home

Awesome

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.

Example.gif

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.

<a href="#ios-test" id="ios-test"><img src="./GIF/ios.gif" align="left" width="200"></a>

<a href="#ios" id="ios"><img src="./GIF/android.gif" width="200"/></a>

<p></p>

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

PropertyDefaultTypeDescription
mode‘board'stringGrading mode, oneOf[‘board’, ‘arcs’, ’stars’, ’smiles']
enabletrueboolwhether the grading component is interactive
readOnlyfalseboolwhether the component is read only
score0numbercurrent 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.
scoreBase5numberIn arcs mode, it’s set 100 automatically when isPercentage=true; In board mode, scoreBase is always 5.
onGrading-functionCallback function of grading component, the first argument is the score graded by user. In smile mode, the argument is     bool type. 
num0numberThe times of grading, board mode only.
name''stringThe title of arc, arcs mode only.
isPercentagefalseboolWhether component displays percentage, arcs mode only.
activeColorACTIVE_COLORstringThe main color used in the component, ACTIVE_COLOR is defined in Constants file.
defaultColorDEFAULT_COLORstringThe default color used in the component, DEFAULT_COLOR is defined in Constants file.
fontColorFONT_COLORstringThe font color used in the component. FONT_COLOR is defined in Constants file.
cancelText‘Cancel'stringThe text of grading modal’s cancel button. Enable in arcs or board mode both.
confirmText‘Confirm'stringThe text of grading modal’s confirm button. Enable in arcs or board mode both.
cancelTextStyle{}objectCustom style for cancel button text of modal. Enable in arcs or board mode both.
confirmTextStyle{}objectCustom style for confirm button text of modal. Enable in arcs or board mode both.
cancelButtonStyle{}objectCustom style for cancel button of modal. Enable in arcs or board mode both.
confirmButtonStyle{}objectCustom style for confirm button text of modal. Enable in arcs or board mode both.

Methods

Please use refs to invoke the following instance methods.

MethodParamsDescription
openGradingModal-Manually open the grading modal. Enabled in arcs mode and board mode both