react-native-star-rating-widget

A customizable, animated star rating component for React Native. Compatible with iOS, Android and Web. Written in Typescript.

Installation

1. install react-native-star-rating-widget npm install react-native-star-rating-widget --save or yarn add react-native-star-rating-widget
2. 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}
      />
  );
};

See example/src for more examples.

Props

StarRating Props

Name	Type	Default	Description
rating	number	REQUIRED	Rating Value. Should be between 0 and maxStars
onChange	(rating: 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	(rating: number) => void	undefined	called when the interaction starts, before onChange
onRatingEnd	(rating: number) => void	undefined	called when the interaction starts, after onChange
animationConfig	see AnimationConfig	see AnimationConfig	animation configuration object
StarIconComponent	(props: { index: number; size: number; color: string; type: "full" | "half" | "empty"; }) => JSX.Element	StarIcon	Icon component
accessibilityLabel	string	star rating. %value% stars. use custom actions to set rating.	The label used on the star component
accessabilityIncrementLabel	string	increment	The label for the increment action
accessabilityDecrementLabel	string	decrement	The label for the decrement action.
accessabilityActivateLabel	string	activate (default)	The label for the activate action.
accessibilityAdjustmentLabel	string	%value% stars	The label that is announced after adjustment action

StarRatingDisplay Props

The StarRatingDisplay component accepts mostly the same props as StarRating except those that are interaction related props such as onChange, enableSwiping, onRatingStart etc.

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