fix resolve delay when dismissing attachment preview

src/libs/AttachmentModalHandler/index.ios.ts

@@ -0,0 +1,12 @@
+import {InteractionManager} from 'react-native';
+import type AttachmentModalHandler from './types';
+
+const attachmentModalHandler: AttachmentModalHandler = {
+    handleModalClose: (onCloseCallback) => {
+        InteractionManager.runAfterInteractions(() => {
+            onCloseCallback?.();
+        });
+    },
+};
+
+export default attachmentModalHandler;

src/libs/AttachmentModalHandler/index.ts

@@ -0,0 +1,9 @@
+import type AttachmentModalHandler from './types';
+
+const attachmentModalHandler: AttachmentModalHandler = {
+    handleModalClose: (onCloseCallback) => {
+        onCloseCallback?.();
+    },
+};
+
+export default attachmentModalHandler;

src/libs/AttachmentModalHandler/types.ts

@@ -0,0 +1,5 @@
+type AttachmentModalHandler = {
+    handleModalClose: (onCloseCallback?: () => void) => void;
+};
+
+export default AttachmentModalHandler;

src/pages/ReportAvatar.tsx

@@ -2,6 +2,7 @@ import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useMemo} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
+import attachmentModalHandler from '@libs/AttachmentModalHandler';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -37,14 +38,16 @@ function ReportAvatar({route}: ReportAvatarProps) {
         };
     }, [report, policy]);
 
+    const onModalClose = () => {
+        Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report?.reportID ?? '-1'));
+    };
+
     return (
         <AttachmentModal
             headerTitle={attachment.headerTitle}
             defaultOpen
             source={attachment.source}
-            onModalClose={() => {
-                Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report?.reportID ?? '-1'));
-            }}
+            onModalClose={() => attachmentModalHandler.handleModalClose(onModalClose)}
             isWorkspaceAvatar={attachment.isWorkspaceAvatar}
             maybeIcon
             originalFileName={attachment.originalFileName}

src/pages/TransactionReceiptPage.tsx

@@ -2,6 +2,7 @@ import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
+import attachmentModalHandler from '@libs/AttachmentModalHandler';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList, RootStackParamList, State} from '@libs/Navigation/types';
 import * as ReceiptUtils from '@libs/ReceiptUtils';
@@ -75,7 +76,7 @@ function TransactionReceipt({route}: TransactionReceiptProps) {
             isTrackExpenseAction={isTrackExpenseAction}
             originalFileName={receiptURIs?.filename}
             defaultOpen
-            onModalClose={onModalClose}
+            onModalClose={() => attachmentModalHandler.handleModalClose(onModalClose)}
             isLoading={!transaction && reportMetadata?.isLoadingInitialReportActions}
             shouldShowNotFoundPage={shouldShowNotFoundPage}
         />

src/pages/home/report/ReportAttachments.tsx

@@ -3,6 +3,7 @@ import React, {useCallback} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
 import type {Attachment} from '@components/Attachments/types';
+import attachmentModalHandler from '@libs/AttachmentModalHandler';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
@@ -42,6 +43,12 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
         [reportID, type, accountID],
     );
 
+    const onModalClose = () => {
+        Navigation.dismissModal();
+        // This enables Composer refocus when the attachments modal is closed by the browser navigation
+        ComposerFocusManager.setReadyToFocus();
+    };
+
     return (
         <AttachmentModal
             accountID={Number(accountID)}
@@ -50,11 +57,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
             defaultOpen
             report={report}
             source={source}
-            onModalClose={() => {
-                Navigation.dismissModal();
-                // This enables Composer refocus when the attachments modal is closed by the browser navigation
-                ComposerFocusManager.setReadyToFocus();
-            }}
+            onModalClose={() => attachmentModalHandler.handleModalClose(onModalClose)}
             onCarouselAttachmentChange={onCarouselAttachmentChange}
             shouldShowNotFoundPage={!isLoadingApp && type !== CONST.ATTACHMENT_TYPE.SEARCH && !report?.reportID}
             isAuthTokenRequired={!!isAuthTokenRequired}

src/pages/settings/Profile/ProfileAvatar.tsx

@@ -3,6 +3,7 @@ import React, {useEffect} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
+import attachmentModalHandler from '@libs/AttachmentModalHandler';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
@@ -35,14 +36,16 @@ function ProfileAvatar({route, personalDetails, personalDetailsMetadata, isLoadi
         PersonalDetails.openPublicProfilePage(accountID);
     }, [accountID, avatarURL]);
 
+    const onModalClose = () => {
+        Navigation.goBack();
+    };
+
     return (
         <AttachmentModal
             headerTitle={displayName}
             defaultOpen
             source={UserUtils.getFullSizeAvatar(avatarURL, accountID)}
-            onModalClose={() => {
-                Navigation.goBack();
-            }}
+            onModalClose={() => attachmentModalHandler.handleModalClose(onModalClose)}
             originalFileName={personalDetail?.originalFileName ?? ''}
             isLoading={!!isLoading}
             shouldShowNotFoundPage={!avatarURL}

src/pages/workspace/WorkspaceAvatar.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
+import attachmentModalHandler from '@libs/AttachmentModalHandler';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -20,13 +21,16 @@ type WorkspaceAvatarProps = WorkspaceAvatarOnyxProps & StackScreenProps<AuthScre
 
 function WorkspaceAvatar({policy, isLoadingApp = true}: WorkspaceAvatarProps) {
     const avatarURL = policy?.avatarURL ?? '' ? policy?.avatarURL ?? '' : ReportUtils.getDefaultWorkspaceAvatar(policy?.name ?? '');
+    const onModalClose = () => {
+        Navigation.goBack();
+    };
 
     return (
         <AttachmentModal
             headerTitle={policy?.name ?? ''}
             defaultOpen
             source={UserUtils.getFullSizeAvatar(avatarURL, 0)}
-            onModalClose={Navigation.goBack}
+            onModalClose={() => attachmentModalHandler.handleModalClose(onModalClose)}
             isWorkspaceAvatar
             originalFileName={policy?.originalFileName ?? policy?.id}
             shouldShowNotFoundPage={!Object.keys(policy ?? {}).length && !isLoadingApp}