Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ui-ninja/react-native-rating-element
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.
https://github.com/ui-ninja/react-native-rating-element
decimal-point-rating ionicons rating ratings react-native star-rating star-rating-component
Last synced: about 2 months ago
JSON representation
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.
- Host: GitHub
- URL: https://github.com/ui-ninja/react-native-rating-element
- Owner: ui-ninja
- License: mit
- Created: 2020-06-06T23:58:13.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T22:32:30.000Z (almost 2 years ago)
- Last Synced: 2024-11-11T21:11:41.490Z (2 months ago)
- Topics: decimal-point-rating, ionicons, rating, ratings, react-native, star-rating, star-rating-component
- Language: JavaScript
- Homepage:
- Size: 2.31 MB
- Stars: 25
- Watchers: 2
- Forks: 5
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-rating-element ★8 - A react native rating system supporting: decimal point's rating, direction aware icons like bottom to top or right to left etc, custom icons from Ionicons, custom images and record rating given by users. (Components / UI)
- awesome-react-native - react-native-rating-element ★8 - A react native rating system supporting: decimal point's rating, direction aware icons like bottom to top or right to left etc, custom icons from Ionicons, custom images and record rating given by users. (Components / UI)
README
React Native Rating Element
A simple rating library for react native supporting:
- **a11y ready** ⚛️
- **decimal points** like 3.7, 4.2 etc,
- **direction aware** icons (like you can pass direction as “column” or “row-reverse”),
- **custom icon set** from Ionicons,
- **custom images** (You can add any suitable image as per your wish),
- and **interact and record rating** given by users.
Installation
·
Usage
·
API Documentation
·
Sample Output
·
> Please note: This package depends on [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons#installation). Please configure it for iOS and android before using this package.
- For iOS, you will need to add `Ionicons.ttf` file from `node_modules/react-native-vector-icons` to `Fonts` folder and then edit `Info.plist`. [Try this article](https://medium.com/@vimniky/how-to-use-vector-icons-in-your-react-native-project-8212ac6a8f06)
- For android - Please follow [these instruction](https://github.com/oblador/react-native-vector-icons#option-with-gradle-recommended).
## Installation
Use the package manager npm to install react-native-rating-element.
```bash
npm install react-native-rating-element
```
## Usage
```javascript
import { Rating } from "react-native-rating-element";
**Custom Image, onIconTap and bottom to top direction**
console.log(`User pressed: ${position}`)}
direction="column-reverse"
type="custom" // default is always to "icon"
selectedIconImage={require('./filled.png')}
emptyIconImage={require('./empty.png')}
/>
```
## API
| prop | default | type | description |
| ------------------------- | ---------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `rated` | 0 | number | Represents Initial value for the rating. |
| `totalCount` | 5 | number | Number of background stars to show. For ex. Rated 5 out of 10 stars. The 10 value is `totalCount` |
| `type` | `icon` | string | If you want custom images, then pass `custom` as prop value.
In case of `custom`, Make sure to pass `selectedIconImage` and `emptyIconImage`. |
| `selectedIconImage` | - | image path (node) | Pass in custom path for selected icon. For ex. `selectedIconImage={require('../pathToImage/image.png}`. |
| `emptyIconImage` | - | image path (node) | Pass in custom path for selected icon. For ex. `emptyIconImage={require('../pathToImage/image.png}`. |
| `readonly` | false | bool | If passed true, `onIconTap` event won't be fired. |
| `direction` | 'row' | string | Pass any value from `[ "row", "row-reverse", "column", "column-reverse"]`. | |
| `onIconTap` | - | func | On press of star icon by user, this function will be invoked with `position` paramter. For ex. when user taps on 4 rating, this function will be invoked and in `position` parameter you will get value 4. Please note: This won't be triggered if `readonly` is passed as true. |
| `ratingColor` | #f1c644 | string (color) | Pass in a custom color to fill-color the rating icon. |
| `ratingBackgroundColor` | #d4d4d4 | string (color) | Pass in a custom fill-color for the background of rating icon. It is sometimes referred as empty icon. |
| `size` | 24 | number | Pass in a custom font size for the icon |
| `icon` | 'ios-star' | string | Pass in a custom text for the icon. For ex. 'beer', 'bulb'. These icons are imported from package [react-native-vector-icons](https://oblador.github.io/react-native-vector-icons/). Please Note: For now this package only support Ionicons |
| `marginBetweenRatingIcon` | 1 | number | Pass in custom number to manage space or margin between the rating icons. |
## Output
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
## License
[MIT](https://choosealicense.com/licenses/mit/)