| | | | | |
| --------------------------------------- | -------- | ---------- |---------- |---------- |
| !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

sh

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

OR

sh

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







😎 Displaying the rating

jsx

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



const App = () => {



  return(

    

  )



};







  

          src="https://i.imgur.com/8YIvDsN.gif"

      title="Star rating demo"

    >

  

  


  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:

jsx

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



const App = () => {



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

  



  return(

            rating={rating} 

        setRating={setRating} 

        size={50}  

        maxStars={5} 

        bordered={false}  

    />

  )



};







  

          src="https://i.imgur.com/SH24cVd.gif"

      title="Star rating input demo"

    >

  

  


  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](https://youtu.be/eNCsP_YhGBk&t=15s)





For Live

Demo` (Expo Snack)