- Added delete button on the checked grocery items

components/pages/grocery/GroceryItem.tsx

@@ -134,17 +134,29 @@ const GroceryItem = ({
         ) : (
           !isEditingTitle &&
           (isParent || isCaregiver) && (
-            <Checkbox
+              <View row>
-              value={item.bought}
+                {item.bought &&
-              containerStyle={[styles.checkbox, { borderRadius: 50 }]}
+                    <AntDesign
-              style={styles.checked}
+                      name="close"
-              borderRadius={50}
+                      size={24}
-              color="#fd1575"
+                      style={{ color: "grey", marginRight: 10 }}
-              hitSlop={20}
+                      onPress={() => {
-              onValueChange={() =>
+                        handleItemApproved(item.id, { approved: false });
-                updateGroceryItem({ id: item.id, bought: !item.bought })
+                        deleteGrocery(item.id);
-              }
+                      }}/>
-            />
+                }
+                <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>
           )
         )}
       </View>