Example is updated with new and better example

Author: WrathChaos

example/App.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { View, StatusBar, SafeAreaView } from "react-native";
+import { View, Text, StatusBar, SafeAreaView } from "react-native";
 import AppleHeader from "react-native-apple-header";
 import BottomSearchBar from "react-native-bottom-search-bar";
 import BouncyCheckbox from "./lib/BouncyCheckbox";
@@ -84,6 +84,65 @@ const App = () => {
             />
           </View>
         </View>
+        <View
+          style={{
+            marginTop: 16,
+          }}
+        >
+          <Text style={{ marginLeft: 24, fontSize: 24, fontWeight: "700" }}>
+            Checkbox Only
+          </Text>
+          <View
+            style={{
+              marginTop: 16,
+              width: "100%",
+              flexDirection: "row",
+              justifyContent: "space-evenly",
+            }}
+          >
+            <BouncyCheckbox
+              size={50}
+              isChecked
+              iconImageStyle={{ width: 18, height: 18 }}
+              disableText
+              onPress={() => {}}
+            />
+            <BouncyCheckbox
+              disableText
+              fillColor="#f54b42"
+              size={50}
+              iconImageStyle={{ width: 18, height: 18 }}
+              iconStyle={{ borderColor: "#f54b42" }}
+              onPress={() => {}}
+            />
+            <BouncyCheckbox
+              isChecked
+              disableText
+              fillColor="#4287f5"
+              size={50}
+              iconImageStyle={{ width: 18, height: 18 }}
+              iconStyle={{ borderColor: "#4287f5" }}
+              onPress={() => {}}
+            />
+            <BouncyCheckbox
+              disableText
+              fillColor="#9342f5"
+              size={50}
+              iconImageStyle={{ width: 18, height: 18 }}
+              iconStyle={{ borderColor: "#9342f5" }}
+              onPress={() => {}}
+            />
+            <BouncyCheckbox
+              isChecked
+              disableText
+              fillColor="green"
+              size={50}
+              iconImageStyle={{ width: 18, height: 18 }}
+              iconStyle={{ borderColor: "green" }}
+              onPress={() => {}}
+            />
+          </View>
+        </View>
         <BottomSearchBar />
       </SafeAreaView>
     </View>

example/lib/BouncyCheckbox.style.ts

@@ -3,6 +3,7 @@ import { ViewStyle, TextStyle, ImageStyle, StyleSheet } from "react-native";
 interface Style {
   container: ViewStyle;
   textContainer: ViewStyle;
+  iconImageStyle: ImageStyle;
 }
 
 export const _iconContainer = (
@@ -31,18 +32,15 @@ export const _textStyle = (checked: boolean): TextStyle => {
   };
 };
 
-export const _iconImageStyle = (checked: boolean): ImageStyle => ({
-  width: 10,
-  height: 10,
-  display: checked ? "flex" : "none",
-});
-
 export default StyleSheet.create<Style>({
   container: {
-    alignSelf: "baseline",
     alignItems: "center",
     flexDirection: "row",
   },
+  iconImageStyle: {
+    width: 10,
+    height: 10,
+  },
   textContainer: {
     marginLeft: 16,
   },

example/lib/BouncyCheckbox.tsx

@@ -100,12 +100,13 @@ class BouncyCheckbox extends React.Component<IBouncyCheckboxProps, IState> {
           iconStyle,
         ]}
       >
-        {iconComponent || (
-          <ImageComponent
-            source={checkIconImageSource}
-            style={[_iconImageStyle(checked), iconImageStyle]}
-          />
-        )}
+        {iconComponent ||
+          (checked && (
+            <ImageComponent
+              source={checkIconImageSource}
+              style={[styles.iconImageStyle, iconImageStyle]}
+            />
+          ))}
       </Animated.View>
     );
   };