modal closing now possible from outside

src/components/ChangePasswordModal.tsx

@@ -1,10 +1,10 @@
-import React, {useState} from "react";
+import React, {useRef, useState} from "react";
 import { Paragraph} from "react-native-paper";
 import {useTheme} from "@/src/context/ThemeProvider";
 import {StyleSheet, View} from "react-native";
 import {ApiResponse, RestService} from "@/src/services/RestService";
 import {useAuth} from "@/src/context/AuthProvider";
-import CustomModal from "@/src/components/themed/CustomModal";
+import CustomModal, {CustomModalHandles} from "@/src/components/themed/CustomModal";
 import PasswordInput from "@/src/components/PasswordInput";
 import ThemedButton from "@/src/components/themed/ThemedButton";
 
@@ -15,11 +15,11 @@ export default function ChangePasswordModal() {
     const [password, setPassword] = useState("");
     const [confirmPassword, setConfirmPassword] = useState("");
     const [apiResponse, setApiResponse] = useState<ApiResponse<{ message: string }> | null>(null);
+    const modalRef = useRef<CustomModalHandles>(null);
+
 
     const handleConfirm = () => {
         if (!password || !confirmPassword) {
-
-
             setApiResponse({ok: false, data: {message: "Bitte füllen Sie alle Felder aus!"}});
             return;
         }
@@ -49,7 +49,7 @@ export default function ChangePasswordModal() {
 
     return (
         <>
-            <CustomModal resetCallback={resetModal} buttonTitle="Passwort ändern">
+            <CustomModal resetCallback={resetModal} buttonTitle="Passwort ändern" ref={modalRef}>
                 <View style={styles.modalContent}>
                     <Paragraph>Passwort ändern</Paragraph>
                     {apiResponse && apiResponse.data?.message && (
@@ -77,6 +77,10 @@ export default function ChangePasswordModal() {
 
                     <View style={styles.buttonGroup}>
                         <ThemedButton mode="contained" onPress={handleConfirm} title={"Bestätigen"} />
+                        <ThemedButton mode="elevated" onPress={() => {
+                            modalRef.current?.close();
+                            resetModal();
+                        }} title={"Abbrechen"} />
                     </View>
                 </View>
             </CustomModal>

src/components/themed/CustomColorPicker.tsx

@@ -1,7 +1,7 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {StyleSheet, View, Dimensions} from 'react-native';
 import ColorPicker, {Panel1, Swatches, Preview, HueSlider, ColorFormatsObject} from 'reanimated-color-picker';
-import CustomModal from "@/src/components/themed/CustomModal";
+import CustomModal, {CustomModalHandles} from "@/src/components/themed/CustomModal";
 import ThemedButton from "@/src/components/themed/ThemedButton";
 import {useTheme} from "@/src/context/ThemeProvider";
 
@@ -12,6 +12,7 @@ interface CustomColorPickerProps {
 
 export default function CustomColorPicker({defaultColor = [255, 255, 255], onSelect}: CustomColorPickerProps) {
     const [currentColor, setCurrentColor] = useState(defaultColor);
+    const modalRef = useRef<CustomModalHandles>(null);
     const {theme} = useTheme();
 
     const rgbToHex = ([r, g, b]: [number, number, number]) =>
@@ -40,6 +41,8 @@ export default function CustomColorPicker({defaultColor = [255, 255, 255], onSel
         setCurrentColor(rgb);
         onSelect(rgb);
         console.log(rgb)
+        console.log(modalRef.current)
+        modalRef.current?.close();
     };
 
     const resetModal = () => {
@@ -48,7 +51,7 @@ export default function CustomColorPicker({defaultColor = [255, 255, 255], onSel
 
     return (
         <View style={styles.container}>
-            <CustomModal resetCallback={resetModal} buttonTitle={"Color Picker"} buttonMode={"outlined"}>
+            <CustomModal resetCallback={resetModal} buttonTitle={"Color Picker"} buttonMode={"outlined"} ref={modalRef}>
                 <View style={styles.modalWrapper}>
                     <View style={[styles.modalContent, {width: pickerWidth, backgroundColor: theme.colors.onSurface}]}>
                         <ColorPicker

src/components/themed/CustomModal.tsx

@@ -1,8 +1,13 @@
-import React, {useState} from "react";
+import React, {forwardRef, useImperativeHandle, useState} from "react";
 import {StyleSheet, View} from "react-native";
 import Modal from "react-native-modal";
 import ThemedButton from "@/src/components/themed/ThemedButton";
 
+export interface CustomModalHandles {
+    open: () => void;
+    close: () => void;
+}
+
 export interface Props {
     resetCallback: () => void;
     children: React.ReactNode;
@@ -10,25 +15,39 @@ export interface Props {
     buttonMode?: 'text' | 'outlined' | 'contained';
 }
 
-export default function CustomModal({resetCallback, children, buttonTitle, buttonMode = "outlined"}: Props) {
-    const [isVisible, setIsVisible] = useState(false);
+const CustomModal = forwardRef<CustomModalHandles, Props>(
+    ({resetCallback, children, buttonTitle, buttonMode = "outlined"}, ref) => {
+        const [isVisible, setIsVisible] = useState(false);
 
-    const resetModal = () => {
-        setIsVisible(false);
-        resetCallback();
+        const resetModal = () => {
+            setIsVisible(false);
+            resetCallback();
+        };
+
+        useImperativeHandle(ref, () => ({
+            open: () => setIsVisible(true),
+            close: () => setIsVisible(false),
+        }));
+
+        return (
+            <>
+                <ThemedButton mode={buttonMode} onPress={() => setIsVisible(true)} title={buttonTitle} />
+                <Modal
+                    isVisible={isVisible}
+                    onModalHide={resetModal}
+                    onBackdropPress={resetModal}
+                    onBackButtonPress={resetModal}
+                >
+                    <View style={styles.modalContent}>
+                        {children}
+                    </View>
+                </Modal>
+            </>
+        );
     }
+);
 
-    return (
-        <>
-            <ThemedButton mode={buttonMode} onPress={() => setIsVisible(true)} title={buttonTitle} />
-            <Modal isVisible={isVisible} onModalHide={resetModal} onBackdropPress={resetModal} onBackButtonPress={resetModal}>
-                <View style={styles.modalContent}>
-                    {children}
-                </View>
-            </Modal>
-        </>
-    );
-}
+export default CustomModal;
 
 const styles = StyleSheet.create({
     modalContent: {