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

@@ -1,6 +1,7 @@
 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 {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
@@ -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

@@ -1,6 +1,7 @@
 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 {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {AuthScreensParamList, RootStackParamList, State} from '@libs/Navigation/types';
@@ -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

@@ -2,6 +2,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 {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/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

@@ -1,7 +1,7 @@
 import React, {useEffect} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
+import attachmentModalHandler from '@libs/AttachmentModalHandler';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
@@ -11,17 +11,13 @@ import * as ValidationUtils from '@libs/ValidationUtils';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
-import type {PersonalDetailsList, PersonalDetailsMetadata} from '@src/types/onyx';
 
-type ProfileAvatarOnyxProps = {
-    personalDetails: OnyxEntry<PersonalDetailsList>;
-    personalDetailsMetadata: OnyxEntry<Record<string, PersonalDetailsMetadata>>;
-    isLoadingApp: OnyxEntry<boolean>;
-};
+type ProfileAvatarProps = PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.PROFILE_AVATAR>;
 
-type ProfileAvatarProps = ProfileAvatarOnyxProps & PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.PROFILE_AVATAR>;
-
-function ProfileAvatar({route, personalDetails, personalDetailsMetadata, isLoadingApp = true}: ProfileAvatarProps) {
+function ProfileAvatar({route}: ProfileAvatarProps) {
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA);
+    const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP);
     const personalDetail = personalDetails?.[route.params.accountID];
     const avatarURL = personalDetail?.avatar ?? '';
     const accountID = Number(route.params.accountID ?? '-1');
@@ -35,14 +31,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}
@@ -52,14 +50,4 @@ function ProfileAvatar({route, personalDetails, personalDetailsMetadata, isLoadi
 
 ProfileAvatar.displayName = 'ProfileAvatar';
 
-export default withOnyx<ProfileAvatarProps, ProfileAvatarOnyxProps>({
-    personalDetails: {
-        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    },
-    personalDetailsMetadata: {
-        key: ONYXKEYS.PERSONAL_DETAILS_METADATA,
-    },
-    isLoadingApp: {
-        key: ONYXKEYS.IS_LOADING_APP,
-    },
-})(ProfileAvatar);
+export default ProfileAvatar;

src/pages/workspace/WorkspaceAvatar.tsx

@@ -1,32 +1,31 @@
 import React from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
+import attachmentModalHandler from '@libs/AttachmentModalHandler';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
-import type {Policy} from '@src/types/onyx';
 
-type WorkspaceAvatarOnyxProps = {
-    policy: OnyxEntry<Policy>;
-    isLoadingApp: OnyxEntry<boolean>;
-};
+type WorkspaceAvatarProps = PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.WORKSPACE_AVATAR>;
 
-type WorkspaceAvatarProps = WorkspaceAvatarOnyxProps & PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.WORKSPACE_AVATAR>;
-
-function WorkspaceAvatar({policy, isLoadingApp = true}: WorkspaceAvatarProps) {
+function WorkspaceAvatar({route}: WorkspaceAvatarProps) {
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID ?? '-1'}`);
+    const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP);
     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}
@@ -38,11 +37,4 @@ function WorkspaceAvatar({policy, isLoadingApp = true}: WorkspaceAvatarProps) {
 
 WorkspaceAvatar.displayName = 'WorkspaceAvatar';
 
-export default withOnyx<WorkspaceAvatarProps, WorkspaceAvatarOnyxProps>({
-    policy: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID ?? '-1'}`,
-    },
-    isLoadingApp: {
-        key: ONYXKEYS.IS_LOADING_APP,
-    },
-})(WorkspaceAvatar);
+export default WorkspaceAvatar;