Skip to content

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

License

Notifications You must be signed in to change notification settings

yukta357/react-native-star-rating-widget

 
 

Repository files navigation

react-native-star-rating-widget

npm version

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

Demo

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

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
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

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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 84.5%
  • JavaScript 15.5%