From 9cb24567cc40cc2ba385a85466c5f84a8bf82220 Mon Sep 17 00:00:00 2001
From: Azeezat Raheem <azeezat94@gmail.com>
Date: Sun, 29 Jun 2025 03:01:26 -0700
Subject: [PATCH] fix: remove check icon when checkbox is  unchecked.

---
 src/components/CheckBox/index.tsx | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/CheckBox/index.tsx b/src/components/CheckBox/index.tsx
index 76e8b7e..58cc14a 100644
--- a/src/components/CheckBox/index.tsx
+++ b/src/components/CheckBox/index.tsx
@@ -17,7 +17,7 @@ const CheckBox = ({
     checkboxComponent,
     checkboxDisabledStyle,
     checkboxStyle,
-    checkboxUnselectedColor,
+    checkboxUnselectedColor = 'white',
     checkboxLabelStyle,
   } = checkboxControls ?? {};
 
@@ -26,12 +26,18 @@ const CheckBox = ({
       ? checkboxDisabledStyle?.backgroundColor || colors.disabled
       : value
       ? checkboxStyle?.backgroundColor || primaryColor
-      : checkboxUnselectedColor || 'white',
+      : checkboxUnselectedColor,
     borderColor: disabled
       ? checkboxDisabledStyle?.borderColor || colors.disabled
       : checkboxStyle?.borderColor || styles.checkbox.borderColor,
   };
   label = typeof label === 'object' ? label : String(label);
+
+  const checkBoxDimensions = {
+    height: checkboxSize || CHECKBOX_SIZE,
+    width: checkboxSize || CHECKBOX_SIZE,
+  };
+
   return (
     <Pressable
       onPress={onChange ? () => onChange(!value) : null}
@@ -44,15 +50,14 @@ const CheckBox = ({
         aria-checked={value}
       >
         {checkboxComponent || (
-          <Image
-            source={require('../../asset/check.png')}
-            style={[
-              {
-                height: checkboxSize || CHECKBOX_SIZE,
-                width: checkboxSize || CHECKBOX_SIZE,
-              },
-            ]}
-          />
+          <View style={checkBoxDimensions}>
+            {value ? (
+              <Image
+                source={require('../../asset/check.png')}
+                style={checkBoxDimensions}
+              />
+            ) : null}
+          </View>
         )}
       </View>
       {label && label !== '' && (