New Prop: disableTextDecoration

Author: WrathChaos

README.md

@@ -84,24 +84,25 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
 
 ### Configuration - Props
 
-| Property      |   Type    |    Default     | Description                                                           |
-| ------------- | :-------: | :------------: | --------------------------------------------------------------------- |
-| text          |  string   | Call my mom 😇 | set the checkbox's text                                               |
-| textColor     |   color   |    #757575     | change the text's color                                               |
-| fontFamily    |  string   |    default     | set your own font family                                              |
-| fontSize      |  number   |       16       | change the text's font size                                           |
-| isChecked     |  boolean  |     false      | set the default checkbox value                                        |
-| checkboxSize  |  number   |       25       | change the checkbox's size                                            |
-| borderRadius  |  number   |     size/2     | change the checkbox's border radius if you do not want the circle one |
-| borderColor   |   color   |    #f09f48     | change the checkbox's border color                                    |
-| fillColor     |   color   |    #f09f48     | change the checkbox's filled color                                    |
-| 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                           |
+| Property              |   Type    |    Default     | Description                                                           |
+| --------------------- | :-------: | :------------: | --------------------------------------------------------------------- |
+| text                  |  string   | Call my mom 😇 | set the checkbox's text                                               |
+| textColor             |   color   |    #757575     | change the text's color                                               |
+| fontFamily            |  string   |    default     | set your own font family                                              |
+| fontSize              |  number   |       16       | change the text's font size                                           |
+| isChecked             |  boolean  |     false      | set the default checkbox value                                        |
+| checkboxSize          |  number   |       25       | change the checkbox's size                                            |
+| borderRadius          |  number   |     size/2     | change the checkbox's border radius if you do not want the circle one |
+| borderColor           |   color   |    #f09f48     | change the checkbox's border color                                    |
+| fillColor             |   color   |    #f09f48     | change the checkbox's filled color                                    |
+| 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                           |
+| disableTextDecoration |  boolean  |     false      | enable/disable text decoration for Text                               |
 
 ### Future Plans
 

example/App.js

@@ -1,8 +1,8 @@
 import React from "react";
 import { View, Image, StatusBar, SafeAreaView } from "react-native";
-import BouncyCheckbox from "react-native-bouncy-checkbox";
-import { AppleHeader } from "@freakycoder/react-native-header-view";
 import BottomSearchBar from "react-native-bottom-search-bar";
+import { AppleHeader } from "@freakycoder/react-native-header-view";
+import BouncyCheckbox from "react-native-bouncy-checkbox";
 
 const App = () => {
   return (
@@ -49,6 +49,7 @@ const App = () => {
           />
           <BouncyCheckbox
             isChecked
+            disableTextDecoration
             text="Try new gym routine"
             fontFamily="JosefinSans-Regular"
           />

lib/src/BouncyCheckbox.js

@@ -72,7 +72,13 @@ class BouncyCheckbox extends Component {
   };
 
   render() {
-    const { text, textColor, fontFamily, fontSize } = this.props;
+    const {
+      text,
+      textColor,
+      fontFamily,
+      fontSize,
+      disableTextDecoration
+    } = this.props;
 
     return (
       <TouchableOpacity
@@ -86,7 +92,8 @@ class BouncyCheckbox extends Component {
               this.state.checked,
               textColor,
               fontFamily,
-              fontSize
+              fontSize,
+              disableTextDecoration
             )}
           >
             {text}
@@ -111,23 +118,25 @@ BouncyCheckbox.propTypes = {
   iconName: PropTypes.string,
   iconSize: PropTypes.number,
   iconType: PropTypes.string,
-  iconColor: PropTypes.string
+  iconColor: PropTypes.string,
+  disableTextDecoration: PropTypes.bool
 };
 
 BouncyCheckbox.defaultProps = {
   fontSize: 16,
+  iconSize: 15,
   checkboxSize: 25,
-  borderRadius: 25 / 2,
   isChecked: false,
-  text: "Call my mom 😇",
+  iconName: "check",
+  iconType: "Entypo",
   textColor: "#757575",
+  borderRadius: 25 / 2,
   fillColor: "#ffc484",
+  iconColor: "#fdfdfd",
+  text: "Call my mom 😇",
   borderColor: "#ffc484",
   unfillColor: "transparent",
-  iconName: "check",
-  iconSize: 15,
-  iconType: "Entypo",
-  iconColor: "#fdfdfd"
+  disableTextDecoration: false
 };
 
 export default BouncyCheckbox;

lib/src/BouncyCheckbox.style.js

@@ -18,12 +18,19 @@ export const iconContainer = (
   };
 };
 
-export const textStyle = (checked, textColor, fontFamily, fontSize) => {
+export const textStyle = (
+  checked,
+  textColor,
+  fontFamily,
+  fontSize,
+  disableTextDecoration
+) => {
   return {
+    fontSize,
     fontFamily,
-    fontSize: 16,
-    color: "#757575",
-    textDecorationLine: checked ? "line-through" : "none"
+    color: textColor,
+    textDecorationLine:
+      !disableTextDecoration && checked ? "line-through" : "none"
   };
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bouncy-checkbox",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Fully customizable animated bouncy checkbox for React Native",
   "keywords": [
     "bouncy",