Skip to content

Commit 1d2223c

Browse files
ui-ninjaui-ninja
authored
Merge pull request #6 from ui-ninja/support-for-custom-images
adding support for images
2 parents f4e6d40 + b07e3f3 commit 1d2223c

File tree

6 files changed

+148
-80
lines changed

6 files changed

+148
-80
lines changed

‎README.md

+41-22
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
# react-native-rating-element
22

33
A simple rating library for react native supporting:
4-
* **decimal points** like 3.7, 4.2 etc,
5-
* **direction aware** icons (like you can pass direction as “column” or “row-reverse”),
6-
* **custom icon set** from Ionicons,
7-
* and **interact and record rating** given by users.
4+
5+
- **decimal points** like 3.7, 4.2 etc,
6+
- **direction aware** icons (like you can pass direction as “column” or “row-reverse”),
7+
- **custom icon set** from Ionicons,
8+
- **custom images** (You can add any suitable image as per your wish),
9+
- and **interact and record rating** given by users.
810

911
> Please note: This package depends on [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons#installation). Please install and configure it before using this package. It is simple to install - First, install the package via `npm` and then link it using `react-native link`.
1012
1113
[Output](https://github.com/ui-ninja/react-native-rating-element#output)
1214
<br />
1315
[API Documentation here](https://github.com/ui-ninja/react-native-rating-element#api)
1416

15-
1617
## Installation
1718

1819
Use the package manager npm to install react-native-rating-element.
@@ -35,42 +36,60 @@ import { Rating } from "react-native-rating-element";
3536
readonly
3637
icon="ios-star"
3738
direction="row"
38-
/>;
39+
/>
40+
41+
**Custom Image**
42+
<Rating
43+
rated={3.7}
44+
totalCount={5}
45+
ratingColor="#b5121b"
46+
ratingBackgroundColor="#c8c7c8"
47+
size={24}
48+
onIconTap={position => console.log(`User pressed: ${position}`)}
49+
icon="ios-star"
50+
direction="row"
51+
type="custom"
52+
selectedIconImage={require('./filled.png')}
53+
emptyIconImage={require('./empty.png')}
54+
/>
3955

40-
*If you want to record user tap on star icon*
56+
**If you want to record user tap on star icon**
4157

4258
<Rating
4359
rated={3.7}
4460
totalCount={5}
4561
ratingColor="#b5121b"
4662
ratingBackgroundColor="#c8c7c8"
4763
size={24}
48-
onStarTap={position => console.log(`User pressed: ${position}`)}
64+
onIconTap={position => console.log(`User pressed: ${position}`)}
4965
icon="ios-star"
5066
direction="row"
51-
/>;
67+
/>
5268

5369

5470
```
5571

5672
## API
5773

58-
| prop | default | type | description |
59-
| ------------------------- | ---------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
60-
| `rated` | 0 | number | Represents Initial value for the rating. |
61-
| `totalCount` | 5 | number | Number of background stars to show. For ex. Rated 5 out of 10 stars. The 10 value is `totalCount` |
62-
| `ratingColor` | #b5121b | string (color) | Pass in a custom color to fill-color the rating icon. |
63-
| `ratingBackgroundColor` | #c8c7c8 | string (color) | Pass in a custom fill-color for the background of rating icon. It is sometimes referred as empty icon. |
64-
| `size` | 24 | number | Pass in a custom font size for the icon |
65-
| `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 |
66-
| `marginBetweenRatingIcon` | 1 | number | Pass in custom number to manage space or margin between the rating icons. |
67-
| `onStarTap` | - | 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. |
68-
| `readonly` | false | bool | If passed true, onPress event won't be fired. |
69-
| `direction` | 'row' | string | Pass any value from `[ "row", "row-reverse", "column", "column-reverse"]`. |
74+
| prop | default | type | description |
75+
| ------------------------- | ---------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
76+
| `type` | `icon` | string | Be default the value is set to "icon" type. If you want custom images, then pass `custom` as prop value. <br />In case of `custom`, Make sure to pass `selectedIconImage` and `emptyIconImage`. | |
77+
| `rated` | 0 | number | Represents Initial value for the rating. |
78+
| `totalCount` | 5 | number | Number of background stars to show. For ex. Rated 5 out of 10 stars. The 10 value is `totalCount` |
79+
| `ratingColor` | #b5121b | string (color) | Pass in a custom color to fill-color the rating icon. |
80+
| `ratingBackgroundColor` | #c8c7c8 | string (color) | Pass in a custom fill-color for the background of rating icon. It is sometimes referred as empty icon. |
81+
| `size` | 24 | number | Pass in a custom font size for the icon |
82+
| `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 |
83+
| `marginBetweenRatingIcon` | 1 | number | Pass in custom number to manage space or margin between the rating icons. |
84+
| `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. |
85+
| `readonly` | false | bool | If passed true, onPress event won't be fired. |
86+
| `direction` | 'row' | string | Pass any value from `[ "row", "row-reverse", "column", "column-reverse"]`. |
87+
| `selectedIconImage` | - | image path (node) | Pass in custom path for selected icon. For ex. `selectedIconImage={require('../pathToImage/image.png}`. |
88+
| `emptyIconImage` | - | image path (node) | Pass in custom path for selected icon. For ex. `emptyIconImage={require('../pathToImage/image.png}`. |
7089

7190
## Output
7291

73-
![Output](https://s7.gifyu.com/images/rating-demo-gif.gif)
92+
![Output](https://s7.gifyu.com/images/Hnet-imageaef0d33f6afa1ffa.gif)
7493

7594
## Contributing
7695

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-rating-element",
3-
"version": "5.0.1",
3+
"version": "5.1.0",
44
"description": "A simple rating library for react native supporting decimal point and custom icon set",
55
"main": "index.js",
66
"scripts": {

‎src/Rating/components/IconBar.js

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import { Image, TouchableOpacity } from "react-native";
4+
import styled from "styled-components/native";
5+
import Icon from "react-native-vector-icons/Ionicons";
6+
7+
const StyledIcon = styled(Icon)`
8+
margin: ${({ margin }) => (margin ? `0 ${margin}px` : "0 1px")};
9+
`;
10+
const StyledImage = styled(Image)`
11+
margin: ${({ margin }) => (margin ? `0 ${margin}px` : "0 1px")};
12+
width: ${({ size }) => `${size}px`};
13+
height: ${({ size }) => `${size}px`};
14+
`;
15+
16+
const IconBar = ({
17+
name,
18+
size,
19+
color,
20+
margin,
21+
onIconTap,
22+
readonly,
23+
position,
24+
type,
25+
selectedIconImage,
26+
emptyIconImage,
27+
filled = false,
28+
}) => {
29+
const emptyIcon = type === "custom" ? emptyIconImage : name;
30+
const filledIcon = type === "custom" ? selectedIconImage : name;
31+
32+
return (
33+
<TouchableOpacity
34+
onPress={() => {
35+
if (!readonly) {
36+
onIconTap(position + 1);
37+
}
38+
}}
39+
>
40+
{type === "custom" ? (
41+
<StyledImage
42+
source={filled ? filledIcon : emptyIcon}
43+
margin={margin}
44+
size={size}
45+
/>
46+
) : (
47+
<StyledIcon
48+
onPress={() => {
49+
if (!readonly) {
50+
onIconTap(position + 1);
51+
}
52+
}}
53+
name={name}
54+
size={size}
55+
color={color}
56+
margin={margin}
57+
/>
58+
)}
59+
</TouchableOpacity>
60+
);
61+
};
62+
63+
IconBar.propTypes = {
64+
color: PropTypes.string,
65+
size: PropTypes.number,
66+
name: PropTypes.string,
67+
margin: PropTypes.number,
68+
onIconTap: PropTypes.func,
69+
readonly: PropTypes.bool,
70+
position: PropTypes.number,
71+
filled: PropTypes.bool,
72+
type: PropTypes.oneOf(["icon", "custom"]),
73+
selectedIconImage: PropTypes.node,
74+
emptyIconImage: PropTypes.node,
75+
};
76+
77+
export default IconBar;

‎src/Rating/components/StarButton.js

-43
This file was deleted.

‎src/Rating/index.js

+28-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3-
import StarButton from "./components/StarButton";
3+
import IconBar from "./components/IconBar";
44
import styled from "styled-components/native";
55

66
const StyledView = styled.View`
@@ -9,12 +9,12 @@ const StyledView = styled.View`
99
justify-content: center;
1010
flex-direction: ${({ dir }) => `${dir}`};
1111
`;
12-
const BackgroundStars = styled.View`
12+
const BackgroundIcons = styled.View`
1313
display: flex;
1414
position: relative;
1515
flex-direction: ${({ dir }) => `${dir}`};
1616
`;
17-
const ColoredStars = styled.View`
17+
const ColoredIcons = styled.View`
1818
display: flex;
1919
overflow: hidden;
2020
position: absolute;
@@ -37,40 +37,51 @@ const Rating = ({
3737
icon,
3838
marginBetweenRatingIcon,
3939
readonly,
40-
onStarTap,
40+
onIconTap,
4141
direction,
42+
type,
43+
selectedIconImage,
44+
emptyIconImage,
4245
}) => {
4346
const percentage = (rated / totalCount) * 100;
47+
4448
return (
4549
<StyledView dir={direction}>
46-
<BackgroundStars dir={direction}>
50+
<BackgroundIcons dir={direction}>
4751
{Array.from({ length: totalCount }, (_, i) => (
48-
<StarButton
52+
<IconBar
4953
name={icon}
5054
size={size}
5155
position={i}
5256
key={`bgstar_${i}`}
5357
color={ratingBackgroundColor}
5458
margin={marginBetweenRatingIcon}
55-
onStarTap={onStarTap}
59+
onIconTap={onIconTap}
5660
readonly={readonly}
61+
type={type}
62+
selectedIconImage={selectedIconImage}
63+
emptyIconImage={emptyIconImage}
5764
/>
5865
))}
59-
<ColoredStars percentage={percentage} dir={direction}>
66+
<ColoredIcons percentage={percentage} dir={direction}>
6067
{Array.from({ length: totalCount }, (_, i) => (
61-
<StarButton
68+
<IconBar
6269
name={icon}
6370
size={size}
6471
color={ratingColor}
6572
position={i}
6673
key={`cstar_${i}`}
6774
margin={marginBetweenRatingIcon}
68-
onStarTap={onStarTap}
75+
onIconTap={onIconTap}
6976
readonly={readonly}
77+
type={type}
78+
selectedIconImage={selectedIconImage}
79+
emptyIconImage={emptyIconImage}
80+
filled
7081
/>
7182
))}
72-
</ColoredStars>
73-
</BackgroundStars>
83+
</ColoredIcons>
84+
</BackgroundIcons>
7485
</StyledView>
7586
);
7687
};
@@ -85,6 +96,7 @@ Rating.defaultProps = {
8596
marginBetweenRatingIcon: 1,
8697
readonly: false,
8798
direction: "row",
99+
type: "icon",
88100
};
89101

90102
Rating.propTypes = {
@@ -96,13 +108,16 @@ Rating.propTypes = {
96108
icon: PropTypes.string,
97109
marginBetweenRatingIcon: PropTypes.number,
98110
readonly: PropTypes.bool,
99-
onStarTap: PropTypes.func,
111+
onIconTap: PropTypes.func,
100112
direction: PropTypes.oneOf([
101113
"row",
102114
"row-reverse",
103115
"column",
104116
"column-reverse",
105117
]),
118+
type: PropTypes.oneOf(["icon", "custom"]),
119+
selectedIconImage: PropTypes.node,
120+
emptyIconImage: PropTypes.node,
106121
};
107122

108123
export default Rating;

0 commit comments

Comments
 (0)