fix: stuck on edit profile media drop down

Author: HelanaNady

src/screens/profile/EditProfileScreen.tsx

@@ -59,8 +59,10 @@ const EditProfileScreen = () => {
   const [bannerUrl, setBannerUrl] = useState<string | null>(user?.bannerUrl || null);
   const [isEditingBanner, setIsEditingBanner] = useState<boolean>(false);
   const [menuVisible, setMenuVisible] = useState<boolean>(false);
+  const [warningMenuVisible, setWarningMenuVisible] = useState<boolean>(false);
 
   const [formDataChanged, setFormDataChanged] = useState<boolean>(false);
+  const [canNavigateAway, setCanNavigateAway] = useState<boolean>(false);
 
   const [formData, setFormData] = useState({
     displayName: user?.displayName || '',
@@ -268,6 +270,7 @@ const EditProfileScreen = () => {
           variant="ghost-default"
           size="md"
           onPress={() => {
+            setCanNavigateAway(true);
             handleFormSubmit();
           }}
           disabled={isSaveDisabled}
@@ -277,16 +280,17 @@ const EditProfileScreen = () => {
     });
   }, [navigation, handleFormSubmit, formData, isSaveDisabled]);
 
+  // warn user when navigating away with unsaved changes
   useEffect(() => {
     const unsubscribe = navigation.addListener('beforeRemove', (e) => {
-      if (!formDataChanged) return;
+      if (canNavigateAway || !formDataChanged) return;
 
       e.preventDefault();
       // Show warning modal
-      setMenuVisible(true);
+      setWarningMenuVisible(true);
     });
     return unsubscribe;
-  }, [navigation, formDataChanged]);
+  }, [navigation, formDataChanged, canNavigateAway]);
 
   if (isLoading) {
     return (
@@ -436,11 +440,11 @@ const EditProfileScreen = () => {
           {/* show warning modal when navigating away with unsaved changes   */}
           <Modal
             transparent
-            visible={menuVisible}
+            visible={warningMenuVisible}
             animationType="fade"
-            onRequestClose={() => setMenuVisible(false)}
+            onRequestClose={() => setWarningMenuVisible(false)}
           >
-            <Pressable onPress={() => setMenuVisible(false)} style={styles.overlay}>
+            <Pressable onPress={() => setWarningMenuVisible(false)} style={styles.overlay}>
               <View style={[styles.dropdown, styles.dropDownWarning]}>
                 <Text
                   className="text-bold text-lg my-2"
@@ -453,7 +457,7 @@ const EditProfileScreen = () => {
                   <Pressable
                     style={styles.dropdownItem}
                     onPress={() => {
-                      setMenuVisible(false);
+                      setWarningMenuVisible(false);
                     }}
                   >
                     <Text style={[styles.dropdownText, styles.dropdownWarningText]}>Cancel</Text>
@@ -462,7 +466,11 @@ const EditProfileScreen = () => {
                   <Pressable
                     style={styles.dropdownItem}
                     onPress={() => {
-                      navigation.goBack();
+                      setWarningMenuVisible(false);
+                      setCanNavigateAway(true);
+                      setTimeout(() => {
+                        navigation.goBack();
+                      }, 100);
                     }}
                   >
                     <Text style={[styles.dropdownText, styles.dropdownWarningText]}>Discard</Text>