Skip to content

rjiandy/react-native-stars-rating

Repository files navigation

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

rn-stars-ios

Android Showcase

rn-stars-android