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

iOS	Android	Web	Expo
✅	✅	✅	✅

🔌 Installation

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

$ 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

For Live Demo (Expo Snack)

Download details:

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

License: MIT license

#react #reactnative