react-native-simple-star-rating-widget

A star rating widget for react native

Usage no npm install needed!

<script type="module">
  import reactNativeSimpleStarRatingWidget from 'https://cdn.skypack.dev/react-native-simple-star-rating-widget';
</script>

README

react-native-simple-star-rating-widget

A customizable, animated star rating component for React Native. Compatible with iOS and Android. 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

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