From 51f01100fbc3c2a0baeedeeca9c1e6855c307193 Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Mon, 19 Aug 2024 12:37:13 +0700
Subject: [PATCH 1/2] fix: only dismiss the report attachment modal once

---
 src/pages/home/report/ReportAttachments.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/report/ReportAttachments.tsx b/src/pages/home/report/ReportAttachments.tsx
index d2678f4e3627..b121dedb4f6c 100644
--- a/src/pages/home/report/ReportAttachments.tsx
+++ b/src/pages/home/report/ReportAttachments.tsx
@@ -1,5 +1,5 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
 import type {Attachment} from '@components/Attachments/types';
@@ -18,6 +18,14 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
     const accountID = route.params.accountID;
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID || -1}`);
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
+    const hasDismissedModalRef = React.useRef(false);
+
+    useEffect(
+        () => () => {
+            hasDismissedModalRef.current = false;
+        },
+        [],
+    );
 
     // In native the imported images sources are of type number. Ref: https://reactnative.dev/docs/image#imagesource
     const source = Number(route.params.source) || route.params.source;
@@ -39,7 +47,10 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
             report={report}
             source={source}
             onModalClose={() => {
-                Navigation.dismissModal();
+                if (!hasDismissedModalRef.current) {
+                    Navigation.dismissModal();
+                    hasDismissedModalRef.current = true;
+                }
                 // This enables Composer refocus when the attachments modal is closed by the browser navigation
                 ComposerFocusManager.setReadyToFocus();
             }}

From c38178baf259b0da242a9acb36a9d2790bc2bb9d Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Mon, 26 Aug 2024 15:17:12 +0700
Subject: [PATCH 2/2] fix: import useRef

---
 src/pages/home/report/ReportAttachments.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/report/ReportAttachments.tsx b/src/pages/home/report/ReportAttachments.tsx
index b121dedb4f6c..7140cd2d45c4 100644
--- a/src/pages/home/report/ReportAttachments.tsx
+++ b/src/pages/home/report/ReportAttachments.tsx
@@ -1,5 +1,5 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useEffect} from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
 import type {Attachment} from '@components/Attachments/types';
@@ -18,7 +18,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
     const accountID = route.params.accountID;
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID || -1}`);
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
-    const hasDismissedModalRef = React.useRef(false);
+    const hasDismissedModalRef = useRef(false);
 
     useEffect(
         () => () => {