A customizables ListView that allows you to display customer review scale.
Using NPM
npm install react-native-customer-review-bars
Using Yarn
yarn add react-native-customer-review-bars
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;
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. |
© Suraj Sanwal