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 --save
or yarn 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 |