1
React Native stock star rating component with zero dependencies
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} />
)
};
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)
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK