react-native-stock-star-rating
TypeScript icon, indicating that this package has built-in type declarations

1.0.6 • Public • Published
NPM VERSION NPM WEEKLY DOWNLOADS GITHUB STAR YOUTUBE VIEWS NPM LIFETIME DOWNLOADS

☆ React Native Stock Star Rating

🟢 React Native Stock Star Rating component with no dependencies

Light Weight Easy to use star rating.

  • Equivalent to React Native Stock Component
  • Use the color of your choice
  • Use bordered or filled star upon your choice
  • Works on all the platforms Android, Ios and Web in the same way
  • Zero dependencies

Compatibility

iOS Android Web Expo

🔌 Installation

$ npm install react-native-stock-star-rating

OR

$ yarn add react-native-stock-star-rating

😎 Displaying the rating

import { Rating } from 'react-native-stock-star-rating'

const App = () => {

  return(
    <Rating stars={4.7} maxStars={5} size={25} />
  )

};


Star Rating Demo

For Live Demo (Expo Snack)

Props for rating

Name Type Description Default
maxStars Number Number of stars to show (Optional) 5
stars Number Filled stars to show or value of rating 0
size Number Size of the star (Optional) 25
color String Use the color you want to give to the rating stars (Optional) #FFDF00
bordered boolean Set to true if you want bordered stars (Optional) false

😎 Star Rating Input

If you want to provide star rating input to capture the rating given by users, you can use this as below:

import { RatingInput } from 'react-native-stock-star-rating'

const App = () => {

  const [rating,setRating] = React.useState(0);
  

  return(
    <RatingInput 
        rating={rating} 
        setRating={setRating} 
        size={50}  
        maxStars={5} 
        bordered={false}  
    />
  )

};


Star Rating Input Demo

Props for rating input

Name Type Description Default
rating Number State variable to store the rating (Required) 0
setRating Function Function to update the rating state variable (Required) -
maxStars Number Number of stars to show (Optional) 5
stars Number Filled stars to show or value of rating 0
size Number Size of the star (Optional) 25
color String Use the color you want to give to the rating stars (Optional) #FFDF00
bordered boolean Set to true if you want bordered stars (Optional) false
onRating Function Callback function to execute after rating input is given (Optional) -

▶️ Watch Tutorial Video

Watch video

For Live Demo (Expo Snack)

Package Sidebar

Install

npm i react-native-stock-star-rating

Weekly Downloads

52

Version

1.0.6

License

MIT

Unpacked Size

16 kB

Total Files

7

Last publish

Collaborators

  • mmusaib