| | | | | |
| --------------------------------------- | -------- | ---------- |---------- |---------- |
|  |  |  |  | 
☆ 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(
)
};
```
Star Rating Demo
For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-stock-star-rating)
# ⭐ 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(
)
};
```
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
[](https://youtu.be/eNCsP_YhGBk&t=15s)
For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-stock-star-rating)