# react-native-recommendation

> A React Native component for generating and displaying interactive rating and recommendation views

Latest version **1.1.2** (published 2019-05-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-recommendation
pnpm add react-native-recommendation
yarn add react-native-recommendation
bun add react-native-recommendation
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2019-05-24 |
| First published | 2019-04-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 38.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | ahmednagyyy |
| Maintainers | ahmednagyyy |
| Keywords | react, native, rating, react, native, recommendation, rating, rate, ratings, recommendation, nps, stars, rating, stars |

## Links

- npm: https://www.npmjs.com/package/react-native-recommendation
- Repository: https://github.com/Ahmednagyyy/React-Native-Recommendation
- npm.io page: https://npm.io/package/react-native-recommendation

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2019-05-24
- 1.1.1 — 2019-04-29
- 1.1.0 — 2019-04-29
- 1.0.9 — 2019-04-29
- 1.0.8 — 2019-04-29
- 1.0.7 — 2019-04-29
- 1.0.6 — 2019-04-29
- 1.0.5 — 2019-04-29
- 1.0.4 — 2019-04-29
- 1.0.3 — 2019-04-29
- 1.0.2 — 2019-04-28
- 1.0.1 — 2019-04-28
- 1.0.0 — 2019-04-28

## README

# React-Native-Recommendation
[![npm version](https://badge.fury.io/js/react-native-recommendation.svg)](https://badge.fury.io/js/react-native-recommendation)
Features
--------

- Net Promoter Score (NPS) view for recommendation and add reviews ( Released :heavy_check_mark: :rocket: )
- Stars and custom images rating ( Released :heavy_check_mark: :rocket: )

Example
--
![](https://media.giphy.com/media/hR0H9YRIb2qVUSXj36/giphy.gif)

Installation
-
`npm i react-native-recommendation`
or
`yarn add react-native-recommendation`

Usage
-
```javascript
import { Recommendation , Rating } from 'react-native-recommendation'
...

 <Rating 
        titleText={"Rating Test"}
        titleStyle={{ alignSelf: 'center', fontWeight: 'bold'}}
        selectedColor={'red'}
        max={5}
        selectedValue={(value)=> // returns selected value } 
        />
        
 <Recommendation 
        titleText={"Recomendation Test"}
        selectedColor={'red'}
        selectedTextColor={'white'}
        unSelectedTextColor={'black'}
        selectedSize={30}
        max={10}
        selectedValue={(value)=> // returns selected value }
        reactionsEnabled // Remove this to disable reaction icon and text
        />
```

**For customized icons and text do as the following**

```javascript
import { Recommendation } from 'react-native-recommendation'
...
// Add NPS reaction description texts in this order
textList=["FROM 9 -> 10","FROM 6 -> 8","FROM 5 -> 4","FROM 2 -> 3","FROM 0 -> 1"]

// Add NPS reaction icons same as text order
emojiList=[
  require('./assets/ic_love.png'),
  require('./assets/ic_happy.png'),
  require('./assets/ic_confused.png'),
  require('./assets/ic_sad.png'),
  require('./assets/ic_angry.png')
]

...

 <Rating 
        titleText={"Rating Test"}
        titleStyle={{ alignSelf: 'center', fontWeight: 'bold'}}
        selectedColor={'red'}
        max={5}
        selectedValue={(value)=> // returns selected value } 
        customSelected={require('./assets/ic_happy.png')}
        customUnSelected={require('./assets/ic_happy.png')} // default value as customSelected prop
        />

 <Recommendation 
        titleText={"Recomendation Test"}
        selectedColor={'red'}
        selectedTextColor={'white'}
        unSelectedTextColor={'black'}
        selectedSize={30}
        max={10}
        selectedValue={(value)=> // returns selected value }
        reactionsEnabled
         // Add these
        reactionTextList={textList}
        reactionList={emojiList}
        />
```

Components
--
`<Recommendation/>`

`<Rating/>`



Components Props 
-
`<Recommendation/>` 

| Prop        | Notes           | Type  | Signature (func) |
| ------------- |:-------------:| -----:|:-|
| titleText      | Recommendation upper title text| String||
| titleStyle      | Recommendation text style |   Style ||
| backgroundColor  | Recommendation view background color      |    Color ||
| width | Recommendation view width size (full width is recommended)      |    Number ||
| selectedColor | Selected option color      |    Color ||
| selectedTextColor | Selected option text color      |    Color ||
| selectedSize | width * height sizes and automatic adjust circular shape --- example: 30 means 30 height, 30 width, and 15 border radius     |    Number ||
| max | Recommendation option maximum numbers range      |    Number ||
| selectedValue | Returned selected value      |    Callback |selectedValue={ (value) => // your code }| 
| reactionsEnabled | Adding smile faces reactions to recommendation  (default false)   |    Boolean || 
| reactionTextList | Set reaction test relative to user selection       |    Array of Strings || 
| reactionList | Set reaction images relative to user selection      |    Array of require(images) || 
| disabled | Recommendation selecting disabled   |    Boolean || 
| currentValue | Recommendation initial value     |    Number || 


---

`<Rating/>` 

| Prop        | Notes           | Type  | Signature (func) |
| ------------- |:-------------:| -----:|:-|
| titleText      | Rating upper title text| String||
| titleStyle      | Rating text style |   Style ||
| backgroundColor  | Rating view background color      |    Color ||
| width | Rating view width size     |    Number ||
| selectedColor | Selected icon color      |    Color ||
| unSelectedColor | Unselected icon color      |    Color ||
| iconStyle | Rating icon style   |    Style ||
| max | Rating option maximum numbers range      |    Number ||
| selectedValue | Returned selected value      |    Callback |selectedValue={ (value) => // your code }| 
| customSelected | Set selected customized rating icon      |    require(image)  || 
| customUnSelected | Set unselected customized rating icon ( customSelected prop is the default value     |   require(image) ||
| disabled | Rating selecting disabled   |    Boolean || 
| currentValue | Rating initial value     |    Number ||

---
_Source: https://npm.io/package/react-native-recommendation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._