Refactored and standardized are you sure modal to component

app/(login)/LoginScreen.tsx

@@ -33,7 +33,7 @@ export default function loginScreen () {
         router.replace('/GroupScreen');
       } else {
         console.log("Group found");
-        router.replace('../(tabs)/ShoppingList/index');                              
+        router.replace('/shoppingList');                              
       }
     });
 

app/(tabs)/expenses/index.tsx

@@ -1,12 +1,12 @@
 import { StyleSheet, Pressable, Dimensions, useColorScheme } from 'react-native';
-import Modal from "react-native-modal";
 import React, { useState, useRef } from 'react';
 import { Text, View, } from '../../../components/Themed';
 import { FlatList } from 'react-native-gesture-handler';
 import { FontAwesome5 } from '@expo/vector-icons';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
 import { calculateExpenses } from '../../../helpers/calculateExpenses';
 import Colors from '../../../constants/Colors';
+import AreYouSureModal from '../../../components/AreYouSureModal';
 
 
 type Expense = {
@@ -79,40 +79,26 @@ export default function SettleScreen() {
     );
   };
 
-  const renderButton = (text: string, backgroundColor: string) => {
-    return (
-      <Pressable style={[styles.button, { backgroundColor }]} onPress={closeModal}>
-        <Text style={styles.buttonText}>{text}</Text>
-      </Pressable>
-    );
-  };
-
   return (
     <View>
       <FlatList
         style={{marginTop: 48}}
         data={calculatedExpenses}
         renderItem={renderItem}
       />
-      <Modal
-        animationIn='zoomIn'
-        animationOut='zoomOut'
+      <AreYouSureModal
+        title='Confirm Payment'
+        text={`Have you sent ${selectedItem?.amount} kr. to ${selectedItem?.to}`}
         isVisible={modalVisible}
-        onBackdropPress={closeModal}
-      >
-        <View style={styles.modalContainer}>
-          {selectedItem && (
-            <View style={styles.modalContent}>
-              <Text style={styles.modalTitleText}>Confirm Payment</Text>
-              <Text style={styles.modalContentText}>Have you sent {selectedItem.amount} kr. to {selectedItem.to}?</Text>
-              <View style={styles.buttonContainer}>
-                {renderButton('Yes', '#5CBCA9')}
-                {renderButton('No', '#E35F52')}
-              </View>
-            </View>
-          )}
-        </View>
-      </Modal>
+        onBackdropPress={() => {
+          closeModal()
+        }}
+        onYes={() =>{
+          closeModal()
+        }}
+        onNo={() =>{
+          closeModal()
+        }}/>
     </View>
   );
 }
@@ -153,37 +139,4 @@ const styles = StyleSheet.create({
   swipeIcon: {
     padding: 10,
   },
-    modalContainer: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  modalContent: {
-    padding: 20,
-    borderRadius: 10,
-  },
-  modalTitleText: {
-    fontSize: 30,
-  },
-  modalContentText: {
-    fontSize: 16,
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    padding: 10,
-    marginTop: '40%',
-  },
-  button: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    borderRadius: 4,
-    elevation: 3,
-    width: "40%",
-  },
-  buttonText: {
-    color: 'white',
-    fontSize: 16,
-  }
 });

app/(tabs)/settings.tsx

@@ -1,39 +1,25 @@
 import { Pressable, StyleSheet } from 'react-native';
-import Modal from "react-native-modal";
 import { Text, View } from '../../components/Themed';
 import { FontAwesome5 } from '@expo/vector-icons';
 import { useState } from 'react';
+import AreYouSureModal from '../../components/AreYouSureModal';
 
 export default function SettingsScreen() {
   const [isModalVisible, setIsModalVisible] = useState(false);
 
-  const handleModal = () => setIsModalVisible(() => !isModalVisible);
+  const toggleModal = () => setIsModalVisible(() => !isModalVisible);
 
   const leaveGroup = () => {
     //Remove from GUN group here
   }
 
-  const renderButton = (text: 'Yes' | 'No') => {
-    return (
-      <Pressable style={[styles.button, { backgroundColor: text === 'Yes' ? '#5CBCA9' : '#E35F52' }]} onPress={() => {
-        if (text === 'Yes')
-        {
-          leaveGroup()
-        }
-        handleModal()
-      }}>
-        <Text style={styles.buttonText}>{text}</Text>
-      </Pressable> 
-    );
-  };
-
   return (
     <View>
       <View>
         <Pressable style={styles.listButton}>
           <Text style={styles.accountSettingsText}>Account Settings</Text>
         </Pressable>
-        <Pressable style={styles.listButton} onPress={handleModal}>
+        <Pressable style={styles.listButton} onPress={toggleModal}>
           <Text style={styles.leaveGroupText}>Leave Group</Text>
           <FontAwesome5
             name="sign-out-alt" 
@@ -42,22 +28,20 @@ export default function SettingsScreen() {
           />
         </Pressable>
       </View>
-      <Modal
-        animationIn='zoomIn' 
-        animationOut='zoomOut' 
-        isVisible={isModalVisible} 
-        onBackdropPress={handleModal}>
-        <View style={styles.modalContainer}>
-          <View style={styles.modalContent}>
-            <Text style={styles.modalTitleText}>Leave Group</Text>
-            <Text style={styles.modalContentText}>Are you sure you want to leave the group?</Text>
-            <View style={styles.buttonContainer}>
-              {renderButton('Yes')}
-              {renderButton('No')}
-            </View>
-          </View>
-        </View>
-      </Modal>
+      <AreYouSureModal
+        title='Leave Group'
+        text='Are you sure you want to leave the group?'
+        isVisible={isModalVisible}
+        onBackdropPress={() => {
+          toggleModal()
+        }}
+        onYes={() =>{
+          leaveGroup()
+          toggleModal()
+        }}
+        onNo={() =>{
+          toggleModal()
+        }}/>
     </View>
   );
 }
@@ -79,36 +63,4 @@ const styles = StyleSheet.create({
   accountSettingsText: {
     fontSize: 16,
   },
-  modalContainer: {
-    justifyContent: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  modalContent: {
-    padding: 20,
-    borderRadius: 10,
-  },
-  modalTitleText: {
-    fontSize: 30,
-  },
-  modalContentText: {
-    fontSize: 16,
-  },
-  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,
-  }
 });

app/(tabs)/shoppingList/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Pressable, StyleSheet, TextInput, useColorScheme } from 'react-native';
+import { Button, StyleSheet, TextInput, useColorScheme } from 'react-native';
 import Modal from "react-native-modal";
 import { Text, View, } from '../../../components/Themed';
 import { useState } from 'react';
@@ -10,6 +10,7 @@ import Colors from '../../../constants/Colors';
 import ActionButton from 'react-native-action-button';
 import { MultiSelect } from 'react-native-element-dropdown';
 import moment from 'moment';
+import AreYouSureModal from '../../../components/AreYouSureModal';
 
 const usersDropdown = [
   { label: 'Test bruger', value: 'Test bruger' },
@@ -103,6 +104,7 @@ export default function ToBeBoughtScreen() {
     setAlreadyBought(false)
     setPrice('0')
     setItemToEdit(undefined)
+    setItemToBuy(0)
   }
 
   const editProduct = (index : number) => {
@@ -182,27 +184,6 @@ export default function ToBeBoughtScreen() {
     }
   }
 
-  const renderButton = (text: 'Yes' | 'No') => {
-    return (
-      <Pressable style={[styles.button, { backgroundColor: text === 'Yes' ? '#5CBCA9' : '#E35F52' }]} onPress={() => {
-        if (text === 'Yes')
-        {
-          //Remove from GUN here
-          setProducts(prevState => prevState.filter((_,i) => i !== itemToDelete))
-          swipeableRows[itemToDelete].reset()
-        }
-        else
-        {
-          swipeableRows[itemToDelete].close()
-        }
-        setItemToDelete(0)
-        toggleModalDeleteItem()
-      }}>
-        <Text style={styles.buttonText}>{text}</Text>
-      </Pressable>   
-    );
-  };
-
   const renderItem = ({item, index}: { item: ListData, index: number}) => {  
     return (
       <Swipeable
@@ -296,25 +277,6 @@ export default function ToBeBoughtScreen() {
           <Button color='#5CBCA9' title={itemToEdit ? "Edit Product" : "Add Product"} onPress={itemToEdit ? saveEditedProduct : saveAddedProduct} />
         </View>
       </Modal>
-      <Modal
-        animationIn='zoomIn'
-        animationOut='zoomOut'
-        isVisible={isModalDeleteVisible} 
-        onBackdropPress={() => {
-          setIsModalDeleteVisible(false)
-          swipeableRows[itemToDelete].close()
-        }}>
-        <View style={styles.modalContainer}>
-          <View style={styles.modalContent}>
-            <Text style={styles.modalTitleText}>Delete Item</Text>
-            <Text style={styles.modalContentText}>Are you sure you want to delete {products[itemToDelete].name}?</Text>
-            <View style={styles.buttonContainer}>
-              {renderButton('Yes')}
-              {renderButton('No')}
-            </View>
-          </View>
-        </View>
-      </Modal>
       <Modal 
         animationIn='zoomIn' 
         animationOut='zoomOut' 
@@ -342,6 +304,25 @@ export default function ToBeBoughtScreen() {
           <Button color='#5CBCA9' title="Add Price" onPress={saveBoughtProduct} />
         </View>
       </Modal>
+      <AreYouSureModal
+        title='Delete Item'
+        text={'Are you sure you want to delete ' + products[itemToDelete].name}
+        isVisible={isModalDeleteVisible}
+        onBackdropPress={() => {
+          setIsModalDeleteVisible(false)
+          swipeableRows[itemToDelete].close()
+        }}
+        onYes={() =>{
+          setProducts(prevState => prevState.filter((_,i) => i !== itemToDelete))
+          swipeableRows[itemToDelete].reset()
+          setItemToDelete(0)
+          toggleModalDeleteItem()
+        }}
+        onNo={() =>{
+          swipeableRows[itemToDelete].close()
+          setItemToDelete(0)
+          toggleModalDeleteItem()
+        }}/>
       <ActionButton
         renderIcon={() => {return <FontAwesome5
           name="plus" 
@@ -413,38 +394,9 @@ const styles = StyleSheet.create({
       flex: 1,
       fontSize: 16,
   },
-  modalContainer: {
-    justifyContent: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  modalContent: {
-    padding: 20,
-    borderRadius: 10,
-  },
   modalTitleText: {
     fontSize: 30,
   },
-  modalContentText: {
-    fontSize: 16,
-  },
-  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,
-  },
   buyItemModal: {
     height: 250,
     padding: 22,