react-native-customer-review-bars

A customizables ListView that allows you to display customer review scale.

Install

Using NPM

npm install react-native-customer-review-bars

Using Yarn

yarn add react-native-customer-review-bars

Example

| | | | :--------------------- | :------------------------: | | | |

Usage

import React, { Component } from "react";
import { View } from "react-native";
import Review from "react-native-customer-review-bars";

const reviews = [
  { value: 10000 },
  { value: 500 },
  { value: 456 },
  { value: 350 },
  { value: 500 }
];
// --- OR ---
// const  reviews = [
//   { value: 10000 , type:"Excellent"},
//   { value: 500 ,type:"Great"},
//   { value: 456 },
//   { value: 350 },
//   { value: 500 }
// ];
// to make custom messages
class App extends Component {
  render() {
    return <Review reviews={reviews} />;
  }
}
export default App;

Properties

| Prop | Default | Type | Description | | :-------------- | :-------------------------------------------------------: | :------: | :---------------------------------------------------------------------------------------------------------------------- | | reviews | [] | array | All items available in the list (array of string or { type, value }) | | | showPercentage | false | bool | Display percentage of reviews | | showCount | false | bool | Display count of reviews | | colors | ["#4CAF50", "#2196F3", "#00bcd4", "#ff9800", "#f44336"] | Array | Change color of bars | | | reviewTypeStyle | {} | object | Style for the "type" label. | | | rightTextStyle | {} | object | Style for the "percentage or value" label. | | | flatListProps | {} | object | FlatList for pass flatlist props inside the component. | | | barStyle | {} | object | Style for the "empty barStyle" style. | | | barFillStyle | {} | object | Style for the "filled bar" style. | |

License

© Suraj Sanwal