Fix bug

app/(tabs)/(index)/index.tsx

@@ -89,7 +89,7 @@ export default function ToBeBoughtScreen() {
 
   const swipeableRows : Swipeable[] = []  
 
-  const handleModalAddOrEditItem = () => setIsModalAddOrEditItemVisible(() => !isModalAddOrEditItemVisible);
+  const handleModalAddOrEditItem = () => { console.log(!isModalAddOrEditItemVisible); setIsModalAddOrEditItemVisible(() => !isModalAddOrEditItemVisible); }
   const handleModalDelete = () => setIsModalDeleteVisible(() => !isModalDeleteVisible);
   const handleCheckbox = () => setAlreadyBought(() => !alreadyBought);
 
@@ -188,21 +188,21 @@ export default function ToBeBoughtScreen() {
         renderLeftActions={leftSwipeAction}
         renderRightActions={rightSwipeAction}
         onSwipeableOpen={(dir) => swipeHandler(dir, index)}>
-        <GestureDetector gesture={Gesture.LongPress().onStart(e => {
-          setItemToEdit(index)
-          editProduct(index)
-          handleModalAddOrEditItem()
-        })}>
-          <TouchableOpacity
-            activeOpacity={0.5}>
+        <TouchableOpacity
+          activeOpacity={0.5}>
+          <GestureDetector gesture={Gesture.LongPress().onStart(e => {
+            setItemToEdit(index)
+            editProduct(index)
+            handleModalAddOrEditItem()
+          })}> 
             <View style={[styles.container, {backgroundColor: index % 2 == 0 ? Colors[colorScheme].listBackgroundColor1 : Colors[colorScheme].listBackgroundColor2}]}>
               <View style={styles.item}>
                 <Text style={styles.itemText}>{item.name}</Text>      
               </View>
               <Text style={styles.infoText}>Added by {item.data.added.user} {item.data.added.date}</Text>
             </View>
-          </TouchableOpacity>
-        </GestureDetector>
+          </GestureDetector>
+        </TouchableOpacity>
       </Swipeable>
     )
   }
@@ -214,7 +214,7 @@ export default function ToBeBoughtScreen() {
         data={products}
         renderItem={renderItem}
       />
-      <Modal animationIn='zoomIn' animationOut='zoomOut' isVisible={isModalAddOrEditItemVisible} onBackdropPress={handleModalAddOrEditItem} onModalHide={clearProduct}>
+      <Modal animationIn='zoomIn' animationOut='zoomOut' isVisible={isModalAddOrEditItemVisible} onBackdropPress={() => setIsModalAddOrEditItemVisible(false)} onModalHide={clearProduct}>
         <View style={ styles.addItemModal }>
           <Text>Product</Text>
           <TextInput

components/AreYouSureModal.tsx

@@ -0,0 +1,83 @@
+import { Pressable, StyleSheet } from "react-native";
+import Modal from "react-native-modal";
+import { Text, View, } from './Themed';
+
+type AreYouSureProps =  {
+  title: string,
+  text: string,
+  isVisible: boolean, 
+  onBackdropPress?: () => void, 
+  onYes?: () => void, 
+  onNo?: () => void
+};
+
+const renderButton = (text: string, onPress?: () => void) => {
+  return (
+    <Pressable style={[styles.button, { backgroundColor: text === 'Yes' ? '#5CBCA9' : '#E35F52' }]} onPress={onPress}>
+      <Text style={styles.buttonText}>{text}</Text>
+    </Pressable>   
+  );
+};
+
+export default function AreYouSureModal(props: AreYouSureProps) {
+  return (
+    <View style={styles.container}>
+      <Modal
+        animationIn='zoomIn' 
+        animationOut='zoomOut' 
+        isVisible={props.isVisible} 
+        onBackdropPress={props.onBackdropPress}>
+        <View style={styles.modalContainer}>
+          <View style={styles.modalContent}>
+            <Text style={styles.modalTitleText}>{props.title}</Text>
+            <Text style={styles.modalContentText}>{props.text}</Text>
+            <View style={styles.buttonContainer}>
+              {renderButton('Yes', props.onYes)}
+              {renderButton('No', props.onNo)}
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  modalContainer: {
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+    modalContent: {
+    padding: 20,
+    borderRadius: 10,
+    height: 250
+  },
+    modalTitleText: {
+    fontSize: 30,
+  },
+    modalContentText: {
+    fontSize: 16,
+    flex: 1
+  },
+    buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    padding: 10,
+  },
+    button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 4,
+    elevation: 3,
+    width: "40%",
+  },
+    buttonText: {
+    color: 'white',
+    fontSize: 16,
+  }
+});