1

React Native stock star rating component with zero dependencies

 1 year ago
source link: https://reactnativeexample.com/react-native-stock-star-rating-component-with-zero-dependencies/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

☆ 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} />
  )

};

68747470733a2f2f692e696d6775722e636f6d2f3859497644734e2e676966

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}  
    />
  )

};

68747470733a2f2f692e696d6775722e636f6d2f534832346356642e676966

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)

GitHub

View Github


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK