add todo repeat freq

components/pages/grocery/GroceryItem.tsx

@@ -36,7 +36,7 @@ const GroceryItem = ({
 
   useEffect(() => {
     setNewTitle(item.title);
-
+    console.log(item);
     getItemCreator(item?.creatorId);
   }, []);
 
@@ -56,11 +56,14 @@ const GroceryItem = ({
   return (
     <View
       key={item.id}
-      style={{ borderRadius: 17, marginVertical: 5 }}
+      style={{
+        borderRadius: 17,
+        marginVertical: 5,
+        paddingHorizontal: isEditingTitle ? 0 : 13,
+        paddingVertical: isEditingTitle ? 0 : 10,
+      }}
       backgroundColor="white"
       centerV
-      paddingH-13
-      paddingV-10
     >
       <View row spread>
         <EditGroceryFrequency
@@ -81,15 +84,15 @@ const GroceryItem = ({
           </View>
         ) : (
           <EditGroceryItem
-              editGrocery={{
-                id: item.id,
-                title: newTitle,
-                category: category,
-                setTitle: setNewTitle,
-                setCategory: setCategory,
-                closeEdit: setIsEditingTitle,
-                handleEditSubmit: updateGroceryItem
-              }}
+            editGrocery={{
+              id: item.id,
+              title: newTitle,
+              category: item.category,
+              setTitle: setNewTitle,
+              setCategory: setCategory,
+              closeEdit: setIsEditingTitle,
+              handleEditSubmit: updateGroceryItem,
+            }}
           />
         )}
         {!item.approved ? (
@@ -115,14 +118,19 @@ const GroceryItem = ({
             />
           </View>
         ) : (
-          <Checkbox
-            value={item.bought}
-            containerStyle={styles.checkbox}
-            hitSlop={20}
-            onValueChange={() =>
-              updateGroceryItem({ id: item.id, bought: !item.bought })
-            }
-          />
+          !isEditingTitle && (
+            <Checkbox
+              value={item.bought}
+              containerStyle={[styles.checkbox, {borderRadius: 50}]}
+              style={styles.checked}
+              borderRadius={50}
+              color="#fd1575"
+              hitSlop={20}
+              onValueChange={() =>
+                updateGroceryItem({ id: item.id, bought: !item.bought })
+              }
+            />
+          )
         )}
       </View>
       {!item.approved && (
@@ -138,9 +146,9 @@ const GroceryItem = ({
                 borderRadius: 50,
                 backgroundColor: "red",
                 marginRight: 10,
-                overflow: 'hidden'
+                overflow: "hidden",
               }}
-              source={require('../../../assets/images/child-picture.png')}
+              source={require("../../../assets/images/child-picture.png")}
             />
             <Text color="#858585" style={styles.authorTxt}>
               Requested by {itemCreator?.firstName}
@@ -166,6 +174,9 @@ const styles = StyleSheet.create({
     fontFamily: "Manrope_500Medium",
     fontSize: 15,
   },
+  checked: {
+    borderRadius: 50,
+  },
 });
 
 export default GroceryItem;