1.0.17 • Published 4 years ago
@empglabs/react-native-star-rating-widget v1.0.17
react-native-star-rating-widget
A customizable, animated star rating component for React Native. Compatible with iOS and Android. Written in Typescript.

Installation
- install react-native-star-rating-widget
npm install react-native-star-rating-widget --saveoryarn add react-native-star-rating-widget - if not already installed, add react-native-svg
Usage
import StarRating from 'react-native-star-rating-widget';
const Example = () => {
const [rating, setRating] = useState(0);
return (
<StarRating
rating={rating}
onChange={setRating}
/>
);
};Props
| Name | Type | Default | Description |
|---|---|---|---|
| rating | number | REQUIRED | Rating Value. Should be between 0 and maxStars |
| onChange | (number) => void | REQUIRED | called when rating changes |
| maxStars | number | 5 | number of stars |
| minRating | number | 0.5 | minimum selectable rating |
| starSize | number | 32 | star size |
| color | string | "#fdd835" | star color |
| emptyColor | string | same as color | empty star color |
| style | object | undefined | optional style |
| enableHalfStar | boolean | true | enable or disable display of half stars |
| animationConfig | see AnimationConfig | see AnimationConfig | animation configuration object |
AnimationConfig
| Name | Type | Default | Description |
|---|---|---|---|
| scale | number | 1.2 | star animation scale value |
| duration | number | 300 | animation duration |
| delay | number | 300 | animation delay when interaction has ended |
| easing | (number) => number | Easing.elastic(2) | animation easing function |
1.0.17
4 years ago