react-native-star-svg-rating
![npm version](https://badge.fury.io/js/react-native-star-svg-rating.svg)
A customizable, animated star rating component for React Native. Compatible with iOS, Android and Web. Written in Typescript.
![Demo](https://github.com/trustee-wallet/react-native-star-svg-rating/raw/master/media/demo.gif)
Installation
- install react-native-star-svg-rating
npm install react-native-star-svg-rating --save
or yarn add react-native-star-svg-rating
- if not already installed, add react-native-svg
Usage
import StarRating from 'react-native-star-svg-rating';
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 |
starSize | number | 32 | star size |
color | string | "#fdd835" | star color |
borderColor | string | same as color | border star color |
emptyColor | string | "#404040" | empty star color |
emptyBorderColor | string | same as emptyColor | empty border star color |
style | object | undefined | optional style |
starStyle | object | undefined | optional star style |
enableHalfStar | boolean | true | enable or disable display of half stars |
enableSwiping | boolean | true | enable or disable swiping |
onRatingStart | () => void | undefined | called when user starts interaction |
onRatingEnd | () => void | undefined | called when user ends interaction |
animationConfig | see AnimationConfig | see AnimationConfig | animation configuration object |
StarIconComponent | (props: { size: number; color: string; borderColor: string; type: "full" | "half" | "empty"; }) => JSX.Element | StarIcon | Icon component |
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 |
A StarRatingDisplay
component without any interaction functionality is exported as well.