Edit name + address for session

components/EditModal.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from 'react';
+import {
+    TextInput,
+    TouchableOpacity,
+    StyleSheet,
+} from 'react-native';
+import Modal from "react-native-modal";
+
+import { Colors } from '@/constants/Colors';
+import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '@/components/ThemedText';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+interface Field {
+    name: string;
+    title?: string;
+    placeholder: string;
+    defaultValue?: string;
+}
+
+interface EditModalProps {
+    title?: string;
+    visible: boolean;
+    onClose?: () => void;
+    onSave: (inputValues: Record<string, string>) => void;
+    fields: Field[];
+}
+
+const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave, fields }) => {
+    const colorScheme = useColorScheme() ?? 'light';
+    const [ inputValues, setInputValues ] = useState<Record<string, string>>( {} );
+
+    useEffect( () => {
+        const initialValues: Record<string, string> = {};
+        fields.forEach( field => {
+            if (field.defaultValue) {
+                initialValues[ field.name ] = field.defaultValue;
+            }
+        } );
+        setInputValues( initialValues );
+    }, [ fields ] );
+
+    const handleInputChange = (name: string, value: string) => {
+        setInputValues( { ...inputValues, [ name ]: value } );
+    };
+
+    const handleSave = () => {
+        onSave( inputValues );
+        if (onClose) onClose();
+    };
+
+    return (
+        <Modal isVisible={visible}>
+            <ThemedView style={{ ...styles.view, backgroundColor: Colors[ colorScheme ].background }}>
+                <ThemedText style={styles.text}>{title ? title : 'Pas je gegevens aan:'}</ThemedText>
+
+                {fields.map( (field, index) => (
+                    <ThemedView key={index} style={styles.inputContainer}>
+                        {field.title && <ThemedText style={styles.inputTitle}>{field.title}</ThemedText>}
+                        <TextInput
+                            style={styles.input}
+                            placeholder={field.placeholder}
+                            onChangeText={(text) => handleInputChange( field.name, text )}
+                            value={inputValues[ field.name ] || ''}
+                        />
+                    </ThemedView>
+
+                ) )}
+
+                <ThemedView style={styles.buttonContainer}>
+                    <TouchableOpacity onPress={onClose || ( () => {
+                    } )}>
+                        <ThemedText style={[ styles.textStyle, styles.buttonClose ]}>Annuleren</ThemedText>
+                    </TouchableOpacity>
+
+                    <TouchableOpacity style={styles.buttonSave} onPress={handleSave}>
+                        <ThemedText style={styles.textStyle}>Opslaan</ThemedText>
+                    </TouchableOpacity>
+                </ThemedView>
+            </ThemedView>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create( {
+    view: {
+        margin: 25,
+        borderRadius: 10,
+        paddingTop: 30,
+        paddingBottom: 30,
+        paddingLeft: 35,
+        paddingRight: 35,
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        elevation: 5,
+    },
+    text: {
+        marginBottom: 15,
+        textAlign: 'center',
+    },
+    inputContainer: {
+        width: '100%',
+        marginBottom: 15,
+    },
+    inputTitle: {
+        fontSize: 16,
+        marginBottom: 5,
+    },
+    input: {
+        height: 40,
+        borderColor: 'gray',
+        borderWidth: 1,
+        width: '100%',
+        paddingHorizontal: 10,
+        borderRadius: 5,
+    },
+    buttonContainer: {
+        marginTop: 20,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
+    buttonClose: {
+        color: Colors.red,
+        paddingTop: 8,
+    },
+    buttonSave: {
+        backgroundColor: Colors.tint,
+        borderRadius: 5,
+        paddingTop: 10,
+        paddingBottom: 10,
+        paddingLeft: 40,
+        paddingRight: 40,
+    },
+    textStyle: {
+        color: 'white',
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+} );
+
+export default CustomModal;

components/HelloWave.tsx

@@ -1,37 +0,0 @@
-import { StyleSheet } from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  withRepeat,
-  withSequence,
-} from 'react-native-reanimated';
-
-import { ThemedText } from '@/components/ThemedText';
-
-export function HelloWave() {
-  const rotationAnimation = useSharedValue(0);
-
-  rotationAnimation.value = withRepeat(
-    withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
-    4 // Run the animation 4 times
-  );
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${rotationAnimation.value}deg` }],
-  }));
-
-  return (
-    <Animated.View style={animatedStyle}>
-      <ThemedText style={styles.text}>👋</ThemedText>
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 28,
-    lineHeight: 32,
-    marginTop: -6,
-  },
-});