React Native Star Rating Component

A React Native component for generating and displaying interactive star ratings. Compatible with both iOS and Android.

Table of Contents

1. Installation
2. Usage
3. Props
4. General Star Example
5. Custom Star Example
6. Roadmap
7. Contributing

Installation

npm install react-native-star-rating --save

And then set up react-native-vector-icons for your project.

Usage

Props

Prop	Type	Description	Required	Default
style	ViewPropTypes.style	Style to apply to star rating.	No	{}
disabled	bool	Sets the interactivity of the star buttons.	No	false
emptyStar	string or image object	The name of the icon to represent an empty star. Refer to react-native-vector-icons. Also can be a image object, both {uri:xxx.xxx} and require('xx/xx/xx.xxx').	No	star-o
fullStar	string or image object	The name of the icon to represent a full star. Refer to react-native-vector-icons. Also can be a image object, both {uri:xxx.xxx} and require('xx/xx/xx.xxx').	No	star
halfStar	string or image object	The name of the icon to represent an half star. Refer to react-native-vector-icons. Also can be a image object, both {uri:xxx.xxx} and require('xx/xx/xx.xxx').	No	star-half-o
iconSet	string	The name of the icon set the star image belongs to. Refer to react-native-vector-icons.	No	FontAwesome
maxStars	number	The maximum number of stars possible.	No	5
rating	number	The current rating to show.	No	0
selectedStar	function	A function to handle star button presses.	Yes	() => undefined
starColor	string	Color of a filled star.	No	black
emptyStarColor	string	Color of an empty star.	No	gray
starSize	number	Size of the star.	No	40
starStyle	ViewPropTypes.style	Style to apply to the star.	No	{}
buttonStyle	ViewPropTypes.style	Style of the button containing the star.	No	{}
halfStarEnabled	bool	Sets ability to select half stars	No	false
reversed	bool	Renders stars from right to left	No	false

For the emptyStar, fullStar, halfStar, and iconSet props, please refer to the react-native-vector-icons package for the valid string names for the star icons. When selecting the icon string names, you must remember to remove the font family name before the first hyphen. For example, if you want to use the ion-ios-star from the Ionicon font set, you would set the fullStar prop to ios-star and the iconSet to Ionicons.

General Star Example

The following example will render 3.5 stars out of 5 stars using the star-o for the empty star icon, star-half-o for the half star icon, and star for the full star icon from the FontAwesome icon set in black color.

import StarRating from 'react-native-star-rating';

class GeneralStarExample extends Component {

  constructor(props) {
    super(props);
    this.state = {
      starCount: 3.5
    };
  }

  onStarRatingPress(rating) {
    this.setState({
      starCount: rating
    });
  }

  render() {
    return (
      <StarRating
        disabled={false}
        maxStars={5}
        rating={this.state.starCount}
        selectedStar={(rating) => this.onStarRatingPress(rating)}
      />
    );
  }
}

export default GeneralStarExample

Custom Star Case

The following example will render 2.5 stars out of 7 stars using the ios-star-outline for the empty star icon, ios-star-half for the half star icon, and ios-star for the full star icon from the Ionicons icon set in red color.

import StarRating from 'react-native-star-rating';

class CustomStarExample extends Component {

  constructor(props) {
    super(props);
    this.state = {
      starCount: 2.5
    };
  }

  onStarRatingPress(rating) {
    this.setState({
      starCount: rating
    });
  }

  render() {
    return (
      <StarRating
        disabled={false}
        emptyStar={'ios-star-outline'}
        fullStar={'ios-star'}
        halfStar={'ios-star-half'}
        iconSet={'Ionicons'}
        maxStars={7}
        rating={this.state.starCount}
        selectedStar={(rating) => this.onStarRatingPress(rating)}
        starColor={'red'}
      />
    );
  }
}

export default CustomStarExample

Roadmap

View the project roadmap here

Contributing

See CONTRIBUTING.md for contribution guidelines.