react-native-rating

react-native-rating

Display ratings in your react-native app like a pro. Works on both iOS and Android.

Install

npm i -S react-native-rating or yarn add react-native-rating

Usage

import Rating from 'react-native-rating'
import { Easing } from 'react-native'

const images = {
  starFilled: require('./assets/star_filled.png'),
  starUnfilled: require('./assets/star_unfilled.png')
}

const myRandoComponent = () => (
  <Rating
    onChange={rating => console.log(rating)}
    selectedStar={images.starFilled}
    unselectedStar={images.starUnfilled}
    config={{
      easing: Easing.inOut(Easing.ease),
      duration: 350
    }}
    stagger={80}
    maxScale={1.4}
    starStyle={{
      width: 40,
      height: 40
    }}
  />
)

Customization

Refer to the propTypes and defaultProps definition below:

static propTypes = {
  max: PropTypes.number,
  initial: PropTypes.number,
  onChange: PropTypes.func,
  config: PropTypes.shape({
    easing: PropTypes.func.isRequired,
    duration: PropTypes.number.isRequired
  }),
  editable: PropTypes.bool,
  stagger: PropTypes.number,
  maxScale: PropTypes.number,
  starStyle: ViewPropTypes.style,
  containerStyle: ViewPropTypes.style,
  selectedStar: PropTypes.number.isRequired,
  unselectedStar: PropTypes.number.isRequired,
  onAnimationComplete: PropTypes.func
}

static defaultProps = {
  max: 5,
  initial: 0,
  onChange: () => {},
  config: {
    easing: Easing.elastic(1),
    duration: 400
  },
  stagger: 100,
  maxScale: 1.1,
  starStyle: {
    width: 36,
    height: 36
  },
  editable: true,
  containerStyle: { flexDirection: 'row' },
  onAnimationComplete: () => {}
}

License

MIT