react-native-rating-simple

react-native-rating-simple is a versatile react native "star" review component with half star compatibility and custom component "star". You can slide/move or simply click on stars. It cna be used for view only

Table of Contents

1. Installation
2. Usage
3. Props
4. Demo
5. Contributing
6. License

Installation

npm install react-native-stars --save

Usage

For Selection with sliding and half star

  <Rating
    halfStar={
      <Image source={halfStar} style={{ width: 40, height: 40 }} />
    }
    fullStar={
      <Image source={fullStar} style={{ width: 40, height: 40 }} />
    }
    emptyStar={
      <Image source={emptyStar} style={{ width: 40, height: 40 }} />
    }
    starSize={40}
    onChange={rating => {
      this.setState({ rating1: rating });
    }}
  />

For view only and half star

  <Rating
    rating={2.5}
    halfStar={
      <Image source={halfStar} style={{ width: 40, height: 40 }} />
    }
    fullStar={
      <Image source={fullStar} style={{ width: 40, height: 40 }} />
    }
    emptyStar={
      <Image source={emptyStar} style={{ width: 40, height: 40 }} />
    }
    starSize={40}
    viewOnly={true}
  />

Props

Property | Type | Required | Default value | Description :--- | :--- | :--- | :--- | :--- rating|number|no|0|The initial rating maxRating|number|no|5|The maximum rating, increasing this number will increase the "stars" as well emptyStar|element|yes||The component for the empty "star" fullStar|element|yes||The component for the full "star" halfStar|element|no||The component for the half "star". Passing this prop will make the rating selectable by 0.5 (half) onChange|func|no||A callback function that i called when you click or when you finish to move/slide. onChangeMove|func|no||A callback function that i called when you are moving/sliding on the stars starSize|number|yes||The size of the stars, this is needed to calculate the value. It must be accurate viewOnly|bool|no|false|Set to true if you want to be view only (no interaction/change) clickOnly|bool|no|false|Set to true if you want to disable the sliding/moving

Demo

I have added an example on the example folder and also published it on Expo.

Contributing

Pull Requests for new features and bugfixes are welcome! :)

License

MIT License