1.7.3 • Published 5 months ago
react-native-star-rating-widget v1.7.3
react-native-star-rating-widget
A customizable, animated star rating component for React Native. Compatible with iOS, Android and Web. Written in Typescript.
Installation
- install react-native-star-rating-widget
npm install react-native-star-rating-widget --save
oryarn add react-native-star-rating-widget
- if not already installed, add react-native-svg
Usage
This package exports an
Interactive StarRating
component
import StarRating from 'react-native-star-rating-widget';
const Example = () => {
const [rating, setRating] = useState(0);
return (
<StarRating
rating={rating}
onChange={setRating}
/>
);
};
Non-Interactive StarRatingDisplay
component
import { StarRatingDisplay } from 'react-native-star-rating-widget';
const Example = () => {
return (
<StarRatingDisplay
rating={4.5}
/>
);
};
Props
StarRating
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 |
emptyColor | string | same as color | empty 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; type: "full" | "half" | "empty"; }) => JSX.Element | StarIcon | Icon component |
StarRatingDisplay
Props
The StarRatingDisplay
component accepts the same props as StarRating
except onChange
, enableSwiping
, onRatingStart
, onRatingEnd
and animationConfig
.
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.7.3
5 months ago
1.7.2
12 months ago
1.7.1
1 year ago
1.7.0
1 year ago
1.6.0
1 year ago
1.5.0
1 year ago
1.4.1
1 year ago
1.4.0
1 year ago
1.3.1
1 year ago
1.6.0-beta.1
1 year ago
1.6.0-beta.2
1 year ago
1.3.0
2 years ago
1.2.0
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.21
3 years ago
1.0.20
3 years ago
1.0.19
3 years ago
1.0.18
3 years ago
1.0.17
4 years ago
1.0.16
4 years ago
1.0.15
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.11
4 years ago
1.0.10
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago