https://github.com/f0rr0/react-native-rating

🌟 cross-platform rating for react-native built with Animated and native driver 🌟
https://github.com/f0rr0/react-native-rating

android animated ios react-native

Last synced: about 2 months ago
JSON representation

🌟 cross-platform rating for react-native built with Animated and native driver 🌟

• Host: GitHub
• URL: https://github.com/f0rr0/react-native-rating
• Owner: f0rr0
• License: mit
• Created: 2017-06-04T11:53:26.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-06T05:54:08.000Z (over 6 years ago)
• Last Synced: 2024-11-24T19:55:18.631Z (2 months ago)
• Topics: android, animated, ios, react-native
• Language: JavaScript
• Homepage:
• Size: 445 KB
• Stars: 91
• Watchers: 4
• Forks: 17
• Open Issues: 7
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

README

        
# 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

```js

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 = () => (

   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:

```js

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