FontFamily bug is fixed. Example is updated with custom icon usage

Author: WrathChaos

README.md

@@ -55,35 +55,53 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
 ```
 
 
-## Customizable Usage
+## Basic Usage
 
-```js
+```jsx
 <BouncyCheckbox
   isChecked
   textColor="#000"
   fillColor="red"
-  iconComponent={your-own-component}
-  fontFamily="JosefinSans-Regular"
   text="Buy tickets for concert 🎉 🎊"
 />
 ```
 
 
+## Advanced Custom Usage
+
+```jsx
+<BouncyCheckbox
+  isChecked={false}
+  textColor="#000"
+  unfillColor="white"
+  fontFamily="JosefinSans-Regular"
+  iconComponent={
+    <Image
+      style={{ height: 10, width: 10 }}
+      source={require("./assets/checkmark.png")}
+    />
+  }
+  text="Custom Icon Example"
+/>
+```
+
+
 ### 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   | JosefinSans-Regular | 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                                           |
+| 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            |
 
 
 ### Future Plans

example/App.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { View, StatusBar, SafeAreaView } from "react-native";
+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";
@@ -11,13 +11,47 @@ const App = () => {
       <SafeAreaView style={{ flex: 1 }}>
         <AppleHeader />
         <View style={{ margin: 16 }}>
-          <BouncyCheckbox />
-          <BouncyCheckbox text="Get groceries" />
-          <BouncyCheckbox text="Pay the bills" isChecked />
-          <BouncyCheckbox text="Take out of the trash 💩" />
-          <BouncyCheckbox text="Buy tickets for concert 🎉 🎊" />
-          <BouncyCheckbox text="Try new gym routine" isChecked />
-          <BouncyCheckbox text="Do a load of laundry" isChecked />
+          <BouncyCheckbox
+            isChecked={false}
+            textColor="#000"
+            unfillColor="white"
+            fontFamily="JosefinSans-Regular"
+            iconComponent={
+              <Image
+                style={{ height: 10, width: 10 }}
+                source={require("./assets/checkmark.png")}
+              />
+            }
+            text="Custom Icon Example"
+          />
+          <BouncyCheckbox fontFamily="JosefinSans-Regular" />
+          <BouncyCheckbox
+            text="Get groceries"
+            fontFamily="JosefinSans-Regular"
+          />
+          <BouncyCheckbox
+            isChecked
+            text="Pay the bills"
+            fontFamily="JosefinSans-Regular"
+          />
+          <BouncyCheckbox
+            fontFamily="JosefinSans-Regular"
+            text="Take out of the trash 💩"
+          />
+          <BouncyCheckbox
+            fontFamily="JosefinSans-Regular"
+            text="Buy tickets for concert 🎉 🎊"
+          />
+          <BouncyCheckbox
+            isChecked
+            text="Try new gym routine"
+            fontFamily="JosefinSans-Regular"
+          />
+          <BouncyCheckbox
+            isChecked
+            text="Do a load of laundry"
+            fontFamily="JosefinSans-Regular"
+          />
         </View>
         <BottomSearchBar />
       </SafeAreaView>

example/assets/checkmark.png

@@ -14,7 +14,7 @@
     "react": "16.9.0",
     "react-native": "0.61.2",
     "react-native-bottom-search-bar": "0.0.24",
-    "react-native-bouncy-checkbox": "0.0.2",
+    "react-native-bouncy-checkbox": "0.0.3",
     "react-native-dynamic-vector-icons": "^0.2.1",
     "react-native-iphone-x-helper": "^1.2.1",
     "react-native-vector-icons": "^6.6.0"

example/package.json

@@ -73,18 +73,7 @@ class BouncyCheckbox extends Component {
   };
 
   render() {
-    const {
-      text,
-      size,
-      isChecked,
-      borderColor,
-      fillColor,
-      unfillColor,
-      onPress,
-      textColor,
-      fontFamily,
-      fontSize
-    } = this.props;
+    const { text, textColor, fontFamily, fontSize } = this.props;
 
     return (
       <TouchableOpacity
@@ -131,8 +120,7 @@ BouncyCheckbox.defaultProps = {
   textColor: "#757575",
   fillColor: "#ffc484",
   borderColor: "#ffc484",
-  unfillColor: "transparent",
-  fontFamily: "JosefinSans-Regular"
+  unfillColor: "transparent"
 };
 
 export default BouncyCheckbox;

lib/src/BouncyCheckbox.js

@@ -20,9 +20,9 @@ export const iconContainer = (
 
 export const textStyle = (checked, textColor, fontFamily, fontSize) => {
   return {
+    fontFamily,
     fontSize: 16,
     color: "#757575",
-    fontFamily: "JosefinSans-Regular",
     textDecorationLine: checked ? "line-through" : "none"
   };
 };

lib/src/BouncyCheckbox.style.js

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