Home

Awesome

npm version

NPM

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

  1. install react-native-star-rating and its dependeices
npm install react-native-star-rating --save

or

yarn add react-native-star-rating
  1. link react-native-vector-icons
    please refer to react-native-vector-icons installation guide

Usage

Props

PropTypeDescriptionRequiredDefault
activeOpacitynumberNumber between 0 a 1 to determine the opacity of the button.No0.2
animationstringAdd an animation to the stars when upon selection. Refer to react-native-animatable for the different animation types.Noundefined
buttonStyleViewPropTypes.styleStyle of the button containing the star.No{}
containerStyleViewPropTypes.styleStyle of the element containing the star rating component.No{}
disabledboolSets the interactivity of the star buttons.Nofalse
emptyStarstring or image objectThe 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').Nostar-o
emptyStarColorstringColor of an empty star.Nogray
fullStarstring or image objectThe 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').Nostar
fullStarColorstringColor of a filled star.Noblack
halfStarstring or image objectThe 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').Nostar-half-o
halfStarColorstringColor of a half-filled star. Defaults to fullStarColor.Noundefined
halfStarEnabledboolSets ability to select half starsNofalse
iconSetstringThe name of the icon set the star image belongs to. Refer to react-native-vector-icons.NoFontAwesome
maxStarsnumberThe maximum number of stars possible.No5
ratingnumberThe current rating to show.No0
reversedboolRenders stars from right to leftNofalse
selectedStarfunctionA function to handle star button presses.Yes() => {}
starSizenumberSize of the star.No40
starStyleViewPropTypes.styleStyle to apply to the star.No{}

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.

For the animation prop, please refer to the react-native-animatable package for valid string names for the different animations available.

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
<p align="center"> <img src="https://github.com/djchie/react-native-star-rating/blob/master/assets/general-star-demo.gif" alt="General Star Example" width="336" height="600"/> </p>

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)}
        fullStarColor={'red'}
      />
    );
  }
}

export default CustomStarExample
<p align="center"> <img src="https://github.com/djchie/react-native-star-rating/blob/master/assets/custom-star-demo.gif" alt="Custom Star Example" width="336" height="600"/> </p>

Running the ExampleApp (WIP)

Navigate to the root of the ExampleApp and install the dependencies

cd ExampleApp && npm install

Run the app on the iOS simulator.

npm run ios

Development Setup (WIP)

Be sure to have create-react-native-app installed.

npm install -g create-react-native-app

Create a development app in the root folder.

create-react-native-app DevelopmentApp

Going into the development app and clone this repo.

cd DevelopmentApp && git clone https://github.com/djchie/react-native-star-rating.git

Go into the react-native-star-rating directory and start developing!

cd react-native-star-rating

Roadmap

View the project roadmap here

Contributing

See CONTRIBUTING.md for contribution guidelines.