Skip to content

Latest commit

 

History

History
92 lines (73 loc) · 2.79 KB

README.md

File metadata and controls

92 lines (73 loc) · 2.79 KB
Raw

react-native-rating-simple

NPM

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

rn-rating-simple

Table of Contents

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

Installation

npm install react-native-rating-simple --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. rn-rating-simple-expo

Contributing

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

License

MIT License