Skip to content

mmusaib/react-native-stock-star-rating

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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)