https://github.com/xgfe/react-native-grading

A React Native grading component using ReactART.
https://github.com/xgfe/react-native-grading

Last synced: 3 months ago
JSON representation

A React Native grading component using ReactART.

• Host: GitHub
• URL: https://github.com/xgfe/react-native-grading
• Owner: xgfe
• License: mit
• Created: 2016-12-26T03:26:59.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-21T04:25:45.000Z (almost 8 years ago)
• Last Synced: 2024-04-14T06:47:27.201Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 876 KB
• Stars: 58
• Watchers: 31
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-grading ★43 - React Native Component for grading scores using ReactART. (Components / UI)

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)

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.







## 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**

```shell

npm install --save react-native-grading

```

**import in project (Insure libART.a is linked)**

```js

import Grading from 'react-native-grading';

```

**board mode (Default)**

```html

```

**stars mode**

```html

```

**arcs mode**

```html

```

**smiles mode**

```html

```

## 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 |