An extendable Ratings components for React Native with gestures and an intuitive API

> This component was inspired from react-native-ratings by Monte Thakkar.

##
Usage

    import { Rating } from 'react-native-elements';

    ratingCompleted(rating) {
      console.log("Rating is: " + rating)
    }

    <Rating
      showRating
      onFinishRating={this.ratingCompleted}
      style={{ paddingVertical: 10 }}
    />

    <Rating
      showRating
      type="star"
      fractions={1}
      startingValue={3.6}
      readonly
      imageSize={40}
      onFinishRating={this.ratingCompleted}
      style={{ paddingVertical: 10 }}
    />

    <Rating
      type="heart"
      ratingCount={3}
      fractions={2}
      startingValue={1.57}
      imageSize={40}
      onFinishRating={this.ratingCompleted}
      showRating
      style={{ paddingVertical: 10 }}
    />

    const WATER_IMAGE = require('./water.png')

    <Rating
      type='custom'
      ratingImage={WATER_IMAGE}
      ratingColor='#3498db'
      ratingBackgroundColor='#c8c7c8'
      ratingCount={10}
      imageSize={30}
      onFinishRating={this.ratingCompleted}
      style={{ paddingVertical: 10 }}
    />

#####
Read-only mode

    const { rating } = this.props;

    <Rating
      imageSize={20}
      readonly
      startingValue={rating}
      style={{ styles.rating }}
    />

#####
Fractions

    <Rating showRating fractions={1} startingValue={3.3} />

##
Props

- `onFinishRating`
- `fractions`
- `imageSize`
- `ratingBackgroundColor`
- `ratingColor`
- `ratingCount`
- `ratingImage`
- `readonly`
- `showRating`
- `startingValue`
- `style`
- `type`

##
Reference

###
`onFinishRating`

Callback method when the user finishes rating. Gives you the final rating value as a whole number (required)

Type | Default
--- | ---
function | none

###
`fractions`

The number of decimal places for the rating value; must be between 0 and 20 (optional)

Type | Default
--- | ---
number | undefined

###
`imageSize`

The size of each rating image (optional)

Type | Default
--- | ---
number | 50

###
`ratingBackgroundColor`

Pass in a custom background-fill-color for the rating icon; use this along with `type='custom'` prop above (optional)

Type | Default
--- | ---
string (color) | white

###
`ratingColor`

Pass in a custom fill-color for the rating icon; use this along with `type='custom'` prop above (optional)

Type | Default
--- | ---
string (color) | #f1c40f

###
`ratingCount`

The number of rating images to display (optional)

Type | Default
--- | ---
number | 5

###
`ratingImage`

Pass in a custom image source; use this along with `type='custom'` prop above (optional)

Type | Default
--- | ---
string | star

###
`readonly`

Whether the rating can be modiefied by the user (optional)

Type | Default
--- | ---
boolean | false

###
`showRating`

Displays the Built-in Rating UI to show the rating value in real-time (optional)

Type | Default
--- | ---
boolean | none

###
`startingValue`

The initial rating to render (optional)

Type | Default
--- | ---
number | ratingCount / 2

###
`style`

Exposes style prop to add additonal styling to the container view (optional)

Type | Default
--- | ---
function | none

###
`type`

Choose one of the built-in types: `star`, `rocket`, `bell`, `heart` or use type `custom` to render a custom image (optional)

Type | Default
--- | ---
string | star

← Pricing SearchBar →