Better UX, inside icon is customizable now

WrathChaos · Mar 16, 2020 · 7b16cfe · 7b16cfe
1 parent 41f3898
commit 7b16cfe
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,9 @@
 <img alt="React Native Bouncy Checkbox" src="assets/logo.png" width="1050"/>
 
-
 [![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-bouncy-checkbox)
 
-
 [![Fully customizable animated bouncy checkbox for React Native](https://img.shields.io/badge/-Fully%20customizable%20animated%20bouncy%20checkbox%20for%20React%20Native-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-bouncy-checkbox)
 
-
 [![npm version](https://img.shields.io/npm/v/react-native-bouncy-checkbox.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-bouncy-checkbox)
 [![npm](https://img.shields.io/npm/dt/react-native-bouncy-checkbox.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-bouncy-checkbox)
 ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
@@ -47,14 +44,14 @@ npm i react-native-bouncy-checkbox
 import BouncyCheckbox from "react-native-bouncy-checkbox";
 ```
 
-# Usage 
+# Usage
 
 ## Basic (Default) Usage
+
 ```js
 <BouncyCheckbox />
 ```
 
-
 ## Basic Usage
 
 ```jsx
@@ -66,7 +63,6 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
 />
 ```
 
-
 ## Advanced Custom Usage
 
 ```jsx
@@ -86,7 +82,6 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
 />
 ```
 
-
 ### Configuration - Props
 
 | Property      |   Type    |    Default     | Description                                                           |
@@ -103,7 +98,10 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
 | unfillColor   |   color   |  transparent   | change the checkbox's un-filled color when it's not checked           |
 | iconComponent | component |      Icon      | set your own icon component                                           |
 | onPress       | function  |      null      | set your own onPress functionality after the bounce effect            |
-
+| iconSize      |  number   |       15       | change the react-native-vector-icons' size                            |
+| iconName      |  string   |     check      | change the react-native-vector-icons' name                            |
+| iconType      |  string   |     Entypo     | change the react-native-vector-icons' type                            |
+| iconColor     |  string   |    #fdfdfd     | change the react-native-vector-icons' color                           |
 
 ### Future Plans
 

diff --git a/lib/src/BouncyCheckbox.js b/lib/src/BouncyCheckbox.js
@@ -39,7 +39,11 @@ class BouncyCheckbox extends Component {
       fillColor,
       borderRadius,
       unfillColor,
-      iconComponent
+      iconComponent,
+      iconName,
+      iconSize,
+      iconType,
+      iconColor
     } = this.props;
     return (
       <Animated.View
@@ -57,11 +61,10 @@ class BouncyCheckbox extends Component {
       >
         {iconComponent || (
           <Icon
-            {...this.props}
-            name="check"
-            type="Entypo"
-            size={15}
-            color="white"
+            size={iconSize}
+            name={iconName}
+            type={iconType}
+            color={iconColor}
           />
         )}
       </Animated.View>
@@ -104,7 +107,11 @@ BouncyCheckbox.propTypes = {
   checkboxSize: PropTypes.number,
   borderColor: PropTypes.string,
   fillColor: PropTypes.string,
-  unfillColor: PropTypes.string
+  unfillColor: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.number,
+  iconType: PropTypes.string,
+  iconColor: PropTypes.string
 };
 
 BouncyCheckbox.defaultProps = {
@@ -116,7 +123,11 @@ BouncyCheckbox.defaultProps = {
   textColor: "#757575",
   fillColor: "#ffc484",
   borderColor: "#ffc484",
-  unfillColor: "transparent"
+  unfillColor: "transparent",
+  iconName: "check",
+  iconSize: 15,
+  iconType: "Entypo",
+  iconColor: "#fdfdfd"
 };
 
 export default BouncyCheckbox;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-bouncy-checkbox",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "Fully customizable animated bouncy checkbox for React Native",
   "keywords": [
     "bouncy",