diff --git a/README.md b/README.md
index f940cd2..bf154fb 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,12 @@
# react-native-rating-element
A simple rating library for react native supporting:
-* **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,
-* and **interact and record rating** given by users.
+
+- **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.
> 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`.
@@ -12,7 +14,6 @@ A simple rating library for react native supporting:
[API Documentation here](https://github.com/ui-ninja/react-native-rating-element#api)
-
## Installation
Use the package manager npm to install react-native-rating-element.
@@ -35,9 +36,24 @@ import { Rating } from "react-native-rating-element";
readonly
icon="ios-star"
direction="row"
-/>;
+/>
+
+**Custom Image**
+ console.log(`User pressed: ${position}`)}
+ icon="ios-star"
+ direction="row"
+ type="custom"
+ selectedIconImage={require('./filled.png')}
+ emptyIconImage={require('./empty.png')}
+/>
-*If you want to record user tap on star icon*
+**If you want to record user tap on star icon**
console.log(`User pressed: ${position}`)}
+ onIconTap={position => console.log(`User pressed: ${position}`)}
icon="ios-star"
direction="row"
-/>;
+/>
```
## 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` |
-| `ratingColor` | #b5121b | string (color) | Pass in a custom color to fill-color the rating icon. |
-| `ratingBackgroundColor` | #c8c7c8 | 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. |
-| `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. |
-| `readonly` | false | bool | If passed true, onPress event won't be fired. |
-| `direction` | 'row' | string | Pass any value from `[ "row", "row-reverse", "column", "column-reverse"]`. |
+| prop | default | type | description |
+| ------------------------- | ---------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` | `icon` | string | Be default the value is set to "icon" type. If you want custom images, then pass `custom` as prop value.
In case of `custom`, Make sure to pass `selectedIconImage` and `emptyIconImage`. | |
+| `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` |
+| `ratingColor` | #b5121b | string (color) | Pass in a custom color to fill-color the rating icon. |
+| `ratingBackgroundColor` | #c8c7c8 | 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. |
+| `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. |
+| `readonly` | false | bool | If passed true, onPress event won't be fired. |
+| `direction` | 'row' | string | Pass any value from `[ "row", "row-reverse", "column", "column-reverse"]`. |
+| `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}`. |
## Output
-
+
## Contributing
diff --git a/package-lock.json b/package-lock.json
index 2098de6..e7cc76e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "react-native-rating-element",
- "version": "5.0.1",
+ "version": "5.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 988930d..50f89dd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-native-rating-element",
- "version": "5.0.1",
+ "version": "5.1.0",
"description": "A simple rating library for react native supporting decimal point and custom icon set",
"main": "index.js",
"scripts": {
diff --git a/src/Rating/components/IconBar.js b/src/Rating/components/IconBar.js
new file mode 100644
index 0000000..33b650b
--- /dev/null
+++ b/src/Rating/components/IconBar.js
@@ -0,0 +1,77 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Image, TouchableOpacity } from "react-native";
+import styled from "styled-components/native";
+import Icon from "react-native-vector-icons/Ionicons";
+
+const StyledIcon = styled(Icon)`
+ margin: ${({ margin }) => (margin ? `0 ${margin}px` : "0 1px")};
+`;
+const StyledImage = styled(Image)`
+ margin: ${({ margin }) => (margin ? `0 ${margin}px` : "0 1px")};
+ width: ${({ size }) => `${size}px`};
+ height: ${({ size }) => `${size}px`};
+`;
+
+const IconBar = ({
+ name,
+ size,
+ color,
+ margin,
+ onIconTap,
+ readonly,
+ position,
+ type,
+ selectedIconImage,
+ emptyIconImage,
+ filled = false,
+}) => {
+ const emptyIcon = type === "custom" ? emptyIconImage : name;
+ const filledIcon = type === "custom" ? selectedIconImage : name;
+
+ return (
+ {
+ if (!readonly) {
+ onIconTap(position + 1);
+ }
+ }}
+ >
+ {type === "custom" ? (
+
+ ) : (
+ {
+ if (!readonly) {
+ onIconTap(position + 1);
+ }
+ }}
+ name={name}
+ size={size}
+ color={color}
+ margin={margin}
+ />
+ )}
+
+ );
+};
+
+IconBar.propTypes = {
+ color: PropTypes.string,
+ size: PropTypes.number,
+ name: PropTypes.string,
+ margin: PropTypes.number,
+ onIconTap: PropTypes.func,
+ readonly: PropTypes.bool,
+ position: PropTypes.number,
+ filled: PropTypes.bool,
+ type: PropTypes.oneOf(["icon", "custom"]),
+ selectedIconImage: PropTypes.node,
+ emptyIconImage: PropTypes.node,
+};
+
+export default IconBar;
diff --git a/src/Rating/components/StarButton.js b/src/Rating/components/StarButton.js
deleted file mode 100644
index 44b5e1c..0000000
--- a/src/Rating/components/StarButton.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Icon from "react-native-vector-icons/Ionicons";
-
-import styled from "styled-components/native";
-
-const StarIcon = styled(Icon)`
- margin: ${({ margin }) => (margin ? `0 ${margin}px` : "0 1px")};
-`;
-
-const StarButton = ({
- name,
- size,
- color,
- margin,
- onStarTap,
- readonly,
- position,
-}) => (
- {
- if (!readonly) {
- onStarTap(position + 1);
- }
- }}
- name={name}
- size={size}
- color={color}
- margin={margin}
- />
-);
-
-StarButton.propTypes = {
- color: PropTypes.string,
- size: PropTypes.number,
- name: PropTypes.string,
- margin: PropTypes.number,
- onStarTap: PropTypes.func,
- readonly: PropTypes.bool,
- position: PropTypes.number,
-};
-
-export default StarButton;
diff --git a/src/Rating/index.js b/src/Rating/index.js
index 9221dc7..6bb687a 100644
--- a/src/Rating/index.js
+++ b/src/Rating/index.js
@@ -1,6 +1,6 @@
import React from "react";
import PropTypes from "prop-types";
-import StarButton from "./components/StarButton";
+import IconBar from "./components/IconBar";
import styled from "styled-components/native";
const StyledView = styled.View`
@@ -9,12 +9,12 @@ const StyledView = styled.View`
justify-content: center;
flex-direction: ${({ dir }) => `${dir}`};
`;
-const BackgroundStars = styled.View`
+const BackgroundIcons = styled.View`
display: flex;
position: relative;
flex-direction: ${({ dir }) => `${dir}`};
`;
-const ColoredStars = styled.View`
+const ColoredIcons = styled.View`
display: flex;
overflow: hidden;
position: absolute;
@@ -37,40 +37,51 @@ const Rating = ({
icon,
marginBetweenRatingIcon,
readonly,
- onStarTap,
+ onIconTap,
direction,
+ type,
+ selectedIconImage,
+ emptyIconImage,
}) => {
const percentage = (rated / totalCount) * 100;
+
return (
-
+
{Array.from({ length: totalCount }, (_, i) => (
-
))}
-
+
{Array.from({ length: totalCount }, (_, i) => (
-
))}
-
-
+
+
);
};
@@ -85,6 +96,7 @@ Rating.defaultProps = {
marginBetweenRatingIcon: 1,
readonly: false,
direction: "row",
+ type: "icon",
};
Rating.propTypes = {
@@ -96,13 +108,16 @@ Rating.propTypes = {
icon: PropTypes.string,
marginBetweenRatingIcon: PropTypes.number,
readonly: PropTypes.bool,
- onStarTap: PropTypes.func,
+ onIconTap: PropTypes.func,
direction: PropTypes.oneOf([
"row",
"row-reverse",
"column",
"column-reverse",
]),
+ type: PropTypes.oneOf(["icon", "custom"]),
+ selectedIconImage: PropTypes.node,
+ emptyIconImage: PropTypes.node,
};
export default Rating;