New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-native-star-svg-rating

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-star-svg-rating

A star rating widget for react native

  • 1.8.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

react-native-star-svg-rating

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-svg-rating npm install react-native-star-svg-rating --save or yarn add react-native-star-svg-rating
  2. if not already installed, add react-native-svg

Usage

import StarRating from 'react-native-star-svg-rating';

const Example = () => {
  const [rating, setRating] = useState(0);
  return (
      <StarRating
        rating={rating}
        onChange={setRating}
      />
  );
};

Props

NameTypeDefaultDescription
ratingnumberREQUIREDRating Value. Should be between 0 and maxStars
onChange(number) => voidREQUIREDcalled when rating changes
maxStarsnumber5number of stars
starSizenumber32star size
colorstring"#fdd835"star color
borderColorstringsame as colorborder star color
emptyColorstring"#404040"empty star color
emptyBorderColorstringsame as emptyColorempty border star color
styleobjectundefinedoptional style
starStyleobjectundefinedoptional star style
enableHalfStarbooleantrueenable or disable display of half stars
enableSwipingbooleantrueenable or disable swiping
onRatingStart() => voidundefinedcalled when user starts interaction
onRatingEnd() => voidundefinedcalled when user ends interaction
animationConfigsee AnimationConfigsee AnimationConfiganimation configuration object
StarIconComponent(props: { size: number; color: string; borderColor: string; type: "full" | "half" | "empty"; }) => JSX.ElementStarIconIcon component

AnimationConfig

NameTypeDefaultDescription
scalenumber1.2star animation scale value
durationnumber300animation duration
delaynumber300animation delay when interaction has ended
easing(number) => numberEasing.elastic(2)animation easing function

A StarRatingDisplay component without any interaction functionality is exported as well.

Keywords

FAQs

Package last updated on 13 Apr 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc