Skip to content

Commit

Permalink
Merge pull request #6 from ui-ninja/support-for-custom-images
Browse files Browse the repository at this point in the history 
adding support for images
  • Loading branch information
@ui-ninja
ui-ninja authored Jul 10, 2020
2 parents f4e6d40 + b07e3f3 commit 1d2223c
Show file tree
Hide file tree
Showing 6 changed files with 148 additions and 80 deletions.
63 changes: 41 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
# 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`.
[Output](https://github.com/ui-ninja/react-native-rating-element#output)
<br />
[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.
Expand All @@ -35,42 +36,60 @@ import { Rating } from "react-native-rating-element";
readonly
icon="ios-star"
direction="row"
/>;
/>

**Custom Image**
<Rating
rated={3.7}
totalCount={5}
ratingColor="#b5121b"
ratingBackgroundColor="#c8c7c8"
size={24}
onIconTap={position => 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**

<Rating
rated={3.7}
totalCount={5}
ratingColor="#b5121b"
ratingBackgroundColor="#c8c7c8"
size={24}
onStarTap={position => 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. <br />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

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

## Contributing

Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
77 changes: 77 additions & 0 deletions src/Rating/components/IconBar.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<TouchableOpacity
onPress={() => {
if (!readonly) {
onIconTap(position + 1);
}
}}
>
{type === "custom" ? (
<StyledImage
source={filled ? filledIcon : emptyIcon}
margin={margin}
size={size}
/>
) : (
<StyledIcon
onPress={() => {
if (!readonly) {
onIconTap(position + 1);
}
}}
name={name}
size={size}
color={color}
margin={margin}
/>
)}
</TouchableOpacity>
);
};

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;
43 changes: 0 additions & 43 deletions src/Rating/components/StarButton.js
View file

This file was deleted.

41 changes: 28 additions & 13 deletions src/Rating/index.js
View file
Original file line number Diff line number Diff line change
@@ -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`
Expand All @@ -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;
Expand All @@ -37,40 +37,51 @@ const Rating = ({
icon,
marginBetweenRatingIcon,
readonly,
onStarTap,
onIconTap,
direction,
type,
selectedIconImage,
emptyIconImage,
}) => {
const percentage = (rated / totalCount) * 100;

return (
<StyledView dir={direction}>
<BackgroundStars dir={direction}>
<BackgroundIcons dir={direction}>
{Array.from({ length: totalCount }, (_, i) => (
<StarButton
<IconBar
name={icon}
size={size}
position={i}
key={`bgstar_${i}`}
color={ratingBackgroundColor}
margin={marginBetweenRatingIcon}
onStarTap={onStarTap}
onIconTap={onIconTap}
readonly={readonly}
type={type}
selectedIconImage={selectedIconImage}
emptyIconImage={emptyIconImage}
/>
))}
<ColoredStars percentage={percentage} dir={direction}>
<ColoredIcons percentage={percentage} dir={direction}>
{Array.from({ length: totalCount }, (_, i) => (
<StarButton
<IconBar
name={icon}
size={size}
color={ratingColor}
position={i}
key={`cstar_${i}`}
margin={marginBetweenRatingIcon}
onStarTap={onStarTap}
onIconTap={onIconTap}
readonly={readonly}
type={type}
selectedIconImage={selectedIconImage}
emptyIconImage={emptyIconImage}
filled
/>
))}
</ColoredStars>
</BackgroundStars>
</ColoredIcons>
</BackgroundIcons>
</StyledView>
);
};
Expand All @@ -85,6 +96,7 @@ Rating.defaultProps = {
marginBetweenRatingIcon: 1,
readonly: false,
direction: "row",
type: "icon",
};

Rating.propTypes = {
Expand All @@ -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;

0 comments on commit 1d2223c

Please sign in to comment.