react-native-stars-rating

react-native-stars-rating

This is a simple rating component for react-native.

Dependencies

1. react-native-vector-icons
2. class-autobind

Installation

$ npm install react-native-stars-rating --save

Link Material Icons Usage

$ react-native link

Usage Example

import Stars from 'react-native-stars-rating';

<Stars
  isActive={true}
  rateMax={5}
  isHalfStarEnabled={false}
  onStarPress={(rating) => console.log(rating)}
  rate={3}
  size={60}
/>

Props

type Props = {
  size?: number;
  color?: number;
  rate: number;
  rateMax: number;
  isActive: boolean;
  onStarPress?: (rating: number) => void;
  isHalfStarEnabled?: boolean;
  rounding: 'up' : 'down';
};

Props Explanation

Prop	Description	Default	Required
size	The Size of the stars	20	no
color	Determine the color of the stars rating	#EEB211	no
rate	Shows current rating for the star component to display	0 (if not active) or 1 (if active)	yes
rateMax	Determine the maximum stars rating to display	5	yes
isActive	Enable the stars rating to be clickable	false	yes
onStarPress	A function that returns the current active rating number using callback	null	no
isHalfStarEnabled	Enable the star rating component to support half rating	false	no
rounding	Enabled rounding logic on rating (3.25 -> 3.5) if using up or vice versa	down	yes

IOS Showcase

Android Showcase