making star rating interactive

README.md

@@ -26,22 +26,41 @@ import { Rating } from "react-native-rating-element";
   ratingColor="#b5121b"
   ratingBackgroundColor="#c8c7c8"
   size={24}
+  readonly
   icon="ios-star"
-/>
+/>;
+
+If you want to record user tap on star
+
+<Rating
+  rated={3.7}
+  totalCount={5}
+  ratingColor="#b5121b"
+  ratingBackgroundColor="#c8c7c8"
+  size={24}
+  onStarTap={position => console.log(`User pressed: ${position}`)}
+  icon="ios-star"
+/>;
+
+
 ```
 
 ## 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` | 25 | number | 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 |
+| 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`                    | 25      | number         | 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` | 2       | 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 wont be fired.                                                                                                                                                                                                 |
 
 ## Output
+
 ![Output](https://i.ibb.co/R7f680V/output.png)
 
 ## Contributing

src/Rating/components/StarButton.js

@@ -0,0 +1,43 @@
+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,
+}) => (
+  <StarIcon
+    onPress={() => {
+      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;

src/Rating/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
+import StarButton from "./components/StarButton";
 import styled from "styled-components/native";
-import Icon from "react-native-vector-icons/Ionicons";
 
 const StyledView = styled.View`
   display: flex;
@@ -22,9 +22,6 @@ const ColoredStars = styled.View`
   position: absolute;
   top: 0;
 `;
-const StarIcon = styled(Icon)`
-  margin-right: 2px;
-`;
 
 const Rating = ({
   rated,
@@ -33,17 +30,36 @@ const Rating = ({
   ratingBackgroundColor,
   size,
   icon,
+  marginBetweenRatingIcon,
+  readonly,
+  onStarTap,
 }) => {
   const percentage = (rated / totalCount) * 100;
   return (
     <StyledView>
       <BackgroundStars>
         {Array.from({ length: totalCount }, (_, i) => (
-          <StarIcon name={icon} size={size} color={ratingBackgroundColor} />
+          <StarButton
+            name={icon}
+            size={size}
+            position={i}
+            color={ratingBackgroundColor}
+            margin={marginBetweenRatingIcon}
+            onStarTap={onStarTap}
+            readonly={readonly}
+          />
         ))}
         <ColoredStars percentage={percentage}>
           {Array.from({ length: totalCount }, (_, i) => (
-            <StarIcon name={icon} size={size} color={ratingColor} />
+            <StarButton
+              name={icon}
+              size={size}
+              color={ratingColor}
+              position={i}
+              margin={marginBetweenRatingIcon}
+              onStarTap={onStarTap}
+              readonly={readonly}
+            />
           ))}
         </ColoredStars>
       </BackgroundStars>
@@ -58,6 +74,8 @@ Rating.defaultProps = {
   ratingBackgroundColor: "#c8c7c8",
   size: 12,
   icon: "ios-star",
+  marginBetweenRatingIcon: 1,
+  readonly: false,
 };
 
 Rating.propTypes = {
@@ -67,6 +85,9 @@ Rating.propTypes = {
   ratingBackgroundColor: PropTypes.string,
   size: PropTypes.number,
   icon: PropTypes.string,
+  marginBetweenRatingIcon: PropTypes.number,
+  readonly: PropTypes.bool,
+  onStarTap: PropTypes.func,
 };
 
 export default Rating;