React Native Stock Star Rating: No Dependencies

☆ 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

iOSAndroidWebExpo
✅✅✅✅

🔌 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

NameTypeDescriptionDefault
maxStarsNumberNumber of stars to show (Optional)5
starsNumberFilled stars to show or value of rating0
sizeNumberSize of the star (Optional)25
colorStringUse the color you want to give to the rating stars (Optional)#FFDF00
borderedbooleanSet 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

NameTypeDescriptionDefault
ratingNumberState variable to store the rating (Required)0
setRatingFunctionFunction to update the rating state variable (Required)-
maxStarsNumberNumber of stars to show (Optional)5
starsNumberFilled stars to show or value of rating0
sizeNumberSize of the star (Optional)25
colorStringUse the color you want to give to the rating stars (Optional)#FFDF00
borderedbooleanSet to true if you want bordered stars (Optional)false
onRatingFunctionCallback function to execute after rating input is given (Optional)-

▶️ Watch Tutorial Video

Watch video

For Live Demo (Expo Snack)


Download details:

Author: mmusaib
Source: https://github.com/mmusaib/react-native-stock-star-rating

License: MIT license

#react #reactnative 

React Native Stock Star Rating: No Dependencies
1.30 GEEK