Migrate ShareDetailsPage to use attachment modal screen

src/ROUTES.ts

@@ -2414,6 +2414,7 @@ const ROUTES = {
         route: 'share/share-details/:reportOrAccountID',
         getRoute: (reportOrAccountID: string) => `share/share-details/${reportOrAccountID}` as const,
     },
+    SHARE_DETAILS_ATTACHMENT: 'share/details/:reportOrAccountID/attachment',
     SHARE_SUBMIT_DETAILS: {
         route: 'share/submit-details/:reportOrAccountID',
         getRoute: (reportOrAccountID: string) => `share/submit-details/${reportOrAccountID}` as const,

src/SCREENS.ts

@@ -791,6 +791,7 @@ const SCREENS = {
     SHARE: {
         ROOT: 'Share_Root',
         SHARE_DETAILS: 'Share_Details',
+        SHARE_DETAILS_ATTACHMENT: 'Share_Details_Attachment',
         SUBMIT_DETAILS: 'Submit_Details',
     },
     TRANSACTION_RECEIPT: 'TransactionReceipt',

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -56,6 +56,8 @@ import SCREENS from '@src/SCREENS';
 import type ReactComponentModule from '@src/types/utils/ReactComponentModule';
 import useModalStackScreenOptions from './useModalStackScreenOptions';
 
+const loadAttachmentModalScreen = () => require<ReactComponentModule>('../../../../pages/media/AttachmentModalScreen').default;
+
 type Screens = Partial<Record<Screen, () => React.ComponentType>>;
 
 const OPTIONS_PER_SCREEN: Partial<Record<Screen, PlatformStackNavigationOptions>> = {
@@ -896,6 +898,7 @@ const RestrictedActionModalStackNavigator = createModalStackNavigator<SearchRepo
 const ShareModalStackNavigator = createModalStackNavigator<ShareNavigatorParamList>({
     [SCREENS.SHARE.ROOT]: () => require<ReactComponentModule>('@pages/Share/ShareRootPage').default,
     [SCREENS.SHARE.SHARE_DETAILS]: () => require<ReactComponentModule>('@pages/Share/ShareDetailsPage').default,
+    [SCREENS.SHARE.SHARE_DETAILS_ATTACHMENT]: loadAttachmentModalScreen,
     [SCREENS.SHARE.SUBMIT_DETAILS]: () => require<ReactComponentModule>('@pages/Share/SubmitDetailsPage').default,
 });
 

src/libs/Navigation/linkingConfig/config.ts

@@ -1882,6 +1882,7 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                     },
                 },
                 [SCREENS.SHARE.SHARE_DETAILS]: {path: ROUTES.SHARE_DETAILS.route},
+                [SCREENS.SHARE.SHARE_DETAILS_ATTACHMENT]: {path: ROUTES.SHARE_DETAILS_ATTACHMENT},
                 [SCREENS.SHARE.SUBMIT_DETAILS]: {path: ROUTES.SHARE_SUBMIT_DETAILS.route},
             },
         },

src/libs/Navigation/types.ts

@@ -2440,6 +2440,7 @@ type SharedScreensParamList = {
 type ShareNavigatorParamList = {
     [SCREENS.SHARE.ROOT]: undefined;
     [SCREENS.SHARE.SHARE_DETAILS]: {reportOrAccountID: string};
+    [SCREENS.SHARE.SHARE_DETAILS_ATTACHMENT]: {reportOrAccountID: string};
     [SCREENS.SHARE.SUBMIT_DETAILS]: {reportOrAccountID: string};
 };
 
@@ -2521,6 +2522,12 @@ type AttachmentModalScreensParamList = {
         iouType: IOUType;
         readonly: string;
     };
+    [SCREENS.SHARE.SHARE_DETAILS_ATTACHMENT]: AttachmentModalContainerModalProps & {
+        source?: AvatarSource;
+        fallbackSource?: AvatarSource;
+        originalFileName?: string;
+        headerTitle?: string;
+    };
 };
 
 type AuthScreensParamList = SharedScreensParamList &

src/pages/Share/ShareDetailsPage.tsx

@@ -1,9 +1,8 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import reportsSelector from '@selectors/Attributes';
-import React, {useEffect, useMemo, useState} from 'react';
-import {SafeAreaView, View} from 'react-native';
+import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
+import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import AttachmentModal from '@components/AttachmentModal';
 import AttachmentPreview from '@components/AttachmentPreview';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
@@ -28,6 +27,7 @@ import {getReportDisplayOption} from '@libs/OptionsListUtils';
 import {shouldValidateFile} from '@libs/ReceiptUtils';
 import {getReportOrDraftReport, isDraftReport} from '@libs/ReportUtils';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
+import AttachmentModalContext from '@pages/media/AttachmentModalScreen/AttachmentModalContext';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -41,11 +41,9 @@ import {showErrorAlert} from './ShareRootPage';
 
 type ShareDetailsPageProps = StackScreenProps<ShareNavigatorParamList, typeof SCREENS.SHARE.SHARE_DETAILS>;
 
-function ShareDetailsPage({
-    route: {
-        params: {reportOrAccountID},
-    },
-}: ShareDetailsPageProps) {
+function ShareDetailsPage({route}: ShareDetailsPageProps) {
+    const {reportOrAccountID} = route.params;
+
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [unknownUserDetails] = useOnyx(ONYXKEYS.SHARE_UNKNOWN_USER_DETAILS, {canBeMissing: true});
@@ -67,6 +65,17 @@ function ShareDetailsPage({
     const validateFileName = shouldUsePreValidatedFile ? getFileName(validatedFile?.uri ?? CONST.ATTACHMENT_IMAGE_DEFAULT_NAME) : getFileName(currentAttachment?.content ?? '');
     const fileType = shouldUsePreValidatedFile ? (validatedFile?.type ?? CONST.SHARE_FILE_MIMETYPE.JPEG) : (currentAttachment?.mimeType ?? '');
 
+    const reportAttachmentsContext = useContext(AttachmentModalContext);
+    const showAttachmentModalScreen = useCallback(() => {
+        reportAttachmentsContext.setCurrentAttachment<typeof SCREENS.SHARE.SHARE_DETAILS_ATTACHMENT>({
+            source: fileSource,
+            headerTitle: validateFileName,
+            originalFileName: validateFileName,
+            fallbackSource: FallbackAvatar,
+        });
+        Navigation.navigate(ROUTES.SHARE_DETAILS_ATTACHMENT);
+    }, [reportAttachmentsContext, fileSource, validateFileName]);
+
     useEffect(() => {
         if (!currentAttachment?.content || errorTitle) {
             return;
@@ -203,25 +212,14 @@ function ShareDetailsPage({
                                 <View style={[styles.pt6, styles.pb2]}>
                                     <Text style={styles.textLabelSupporting}>{translate('common.attachment')}</Text>
                                 </View>
-                                <SafeAreaView>
-                                    <AttachmentModal
-                                        headerTitle={validateFileName}
-                                        source={fileSource}
-                                        originalFileName={validateFileName}
-                                        fallbackSource={FallbackAvatar}
-                                    >
-                                        {({show}) => (
-                                            <AttachmentPreview
-                                                source={fileSource ?? ''}
-                                                aspectRatio={currentAttachment?.aspectRatio}
-                                                onPress={show}
-                                                onLoadError={() => {
-                                                    showErrorAlert(translate('attachmentPicker.attachmentError'), translate('attachmentPicker.errorWhileSelectingCorruptedAttachment'));
-                                                }}
-                                            />
-                                        )}
-                                    </AttachmentModal>
-                                </SafeAreaView>
+                                <AttachmentPreview
+                                    source={fileSource ?? ''}
+                                    aspectRatio={currentAttachment?.aspectRatio}
+                                    onPress={showAttachmentModalScreen}
+                                    onLoadError={() => {
+                                        showErrorAlert(translate('attachmentPicker.attachmentError'), translate('attachmentPicker.errorWhileSelectingCorruptedAttachment'));
+                                    }}
+                                />
                             </>
                         )}
                     </PressableWithoutFeedback>

src/pages/media/AttachmentModalScreen/index.tsx

@@ -5,6 +5,7 @@ import ProfileAvatarModalContent from './routes/ProfileAvatarModalContent';
 import ReportAddAttachmentModalContent from './routes/report/ReportAddAttachmentModalContent';
 import ReportAttachmentModalContent from './routes/report/ReportAttachmentModalContent';
 import ReportAvatarModalContent from './routes/report/ReportAvatarModalContent';
+import ShareDetailsAttachmentModalContent from './routes/ShareDetailsAttachmentModalContent';
 import TransactionReceiptModalContent from './routes/TransactionReceiptModalContent';
 import WorkspaceAvatarModalContent from './routes/WorkspaceAvatarModalContent';
 import type {AttachmentModalScreenProps, AttachmentModalScreenType} from './types';
@@ -81,6 +82,15 @@ function AttachmentModalScreen<Screen extends AttachmentModalScreenType>({route,
         );
     }
 
+    if (route.name === SCREENS.SHARE.SHARE_DETAILS_ATTACHMENT) {
+        return (
+            <ShareDetailsAttachmentModalContent
+                route={routeWithContext as RouteType<typeof SCREENS.SHARE.SHARE_DETAILS_ATTACHMENT>}
+                navigation={navigation as NavigationType<typeof SCREENS.SHARE.SHARE_DETAILS_ATTACHMENT>}
+            />
+        );
+    }
+
     return null;
 }
 

src/pages/media/AttachmentModalScreen/routes/ShareDetailsAttachmentModalContent.tsx

@@ -0,0 +1,41 @@
+import React, {useMemo} from 'react';
+import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
+import type {AttachmentModalBaseContentProps} from '@pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types';
+import AttachmentModalContainer from '@pages/media/AttachmentModalScreen/AttachmentModalContainer';
+import type {AttachmentModalScreenProps} from '@pages/media/AttachmentModalScreen/types';
+import type SCREENS from '@src/SCREENS';
+import useDownloadAttachment from './hooks/useDownloadAttachment';
+import useReportAttachmentModalType from './hooks/useReportAttachmentModalType';
+
+function ShareDetailsAttachmentModalContent({route, navigation}: AttachmentModalScreenProps<typeof SCREENS.SHARE.SHARE_DETAILS_ATTACHMENT>) {
+    const {source: sourceParam, originalFileName: originalFileNameParam, headerTitle, onShow, onClose} = route.params;
+
+    const source = useMemo(() => Number(sourceParam) || (typeof sourceParam === 'string' ? tryResolveUrlFromApiRoot(decodeURIComponent(sourceParam)) : undefined), [sourceParam]);
+    const originalFileName = originalFileNameParam ?? '';
+
+    const onDownloadAttachment = useDownloadAttachment({});
+
+    const contentProps = useMemo<AttachmentModalBaseContentProps>(
+        () => ({
+            source,
+            originalFileName,
+            headerTitle,
+            onDownloadAttachment,
+        }),
+        [headerTitle, onDownloadAttachment, originalFileName, source],
+    );
+
+    const modalType = useReportAttachmentModalType(source);
+    return (
+        <AttachmentModalContainer<typeof SCREENS.SHARE.SHARE_DETAILS_ATTACHMENT>
+            navigation={navigation}
+            contentProps={contentProps}
+            modalType={modalType}
+            onShow={onShow}
+            onClose={onClose}
+        />
+    );
+}
+ShareDetailsAttachmentModalContent.displayName = 'ReportAttachmentModalContent';
+
+export default ShareDetailsAttachmentModalContent;

src/pages/media/AttachmentModalScreen/types.ts

@@ -33,7 +33,8 @@ type AttachmentModalScreenType =
     | typeof SCREENS.PROFILE_AVATAR
     | typeof SCREENS.WORKSPACE_AVATAR
     | typeof SCREENS.TRANSACTION_RECEIPT
-    | typeof SCREENS.MONEY_REQUEST.RECEIPT_PREVIEW;
+    | typeof SCREENS.MONEY_REQUEST.RECEIPT_PREVIEW
+    | typeof SCREENS.SHARE.SHARE_DETAILS_ATTACHMENT;
 
 type AttachmentModalScreenBaseParams = AttachmentModalBaseContentProps & AttachmentModalContainerModalProps;