Package Exports
- react-native-stock-star-rating
- react-native-stock-star-rating/index.tsx
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-stock-star-rating) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
☆ React Native Stock Star Rating
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
OR
$ 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)
