refactor: Make AttachmentModal actual screens on native platforms

assets/emojis/types.ts

@@ -1,4 +1,4 @@
-import type IconAsset from '@src/types/utils/IconAsset';
+import type {IconAsset} from '@src/types/utils/ImageTypes';
 
 type Emoji = {
     code: string;

src/ROUTES.ts

@@ -5,6 +5,7 @@
 import type {IOURequestType} from './libs/actions/IOU';
 import Log from './libs/Log';
 import type {ReimbursementAccountStepToOpen} from './libs/ReimbursementAccountUtils';
+import type {AvatarSource, StaticAvatarSource} from './libs/UserUtils';
 import type {ExitReason} from './types/form/ExitSurveyReasonForm';
 import type {ConnectionName, SageIntacctMappingName} from './types/onyx/Policy';
 import type AssertTypesNotEqual from './types/utils/AssertTypesNotEqual';
@@ -353,22 +354,41 @@
     },
     ATTACHMENTS: {
         route: 'attachment',
-        getRoute: (
-            reportID: string | undefined,
-            type: ValueOf<typeof CONST.ATTACHMENT_TYPE>,
-            url: string,
-            accountID?: number,
-            isAuthTokenRequired?: boolean,
-            fileName?: string,
-            attachmentLink?: string,
-        ) => {
+        getRoute: ({
+            source,
+            fallbackSource,
+            headerTitle,
+            fileName,
+            maybeIcon,
+            reportID,
+            type,
+            accountID,
+            isAuthTokenRequired,
+            attachmentLink,
+        }: {
+            source: string;
+            fallbackSource?: string;
+            headerTitle?: string;
+            maybeIcon?: boolean;
+            reportID?: string | undefined;
+            type?: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
+            accountID?: number;
+            isAuthTokenRequired?: boolean;
+            fileName?: string;
+            attachmentLink?: string;
+        }) => {
+            const sourceParam = `?source=${encodeURIComponent(source)}`;
+            const fallbackSourceParam = fallbackSource ? `&fallbackSource=${encodeURIComponent(fallbackSource)}` : '';
+            const typeParam = type ? `$type=${type as string}` : '';
             const reportParam = reportID ? `&reportID=${reportID}` : '';
             const accountParam = accountID ? `&accountID=${accountID}` : '';
             const authTokenParam = isAuthTokenRequired ? '&isAuthTokenRequired=true' : '';
             const fileNameParam = fileName ? `&fileName=${fileName}` : '';
             const attachmentLinkParam = attachmentLink ? `&attachmentLink=${attachmentLink}` : '';
+            const headerTitleParam = headerTitle ? `&headerTitle=${headerTitle}` : '';
+            const maybeIconParam = maybeIcon ? `&maybeIcon=${maybeIcon}` : '';
 
-            return `attachment?source=${encodeURIComponent(url)}&type=${type as string}${reportParam}${accountParam}${authTokenParam}${fileNameParam}${attachmentLinkParam}` as const;
+            return `attachment${sourceParam}${fallbackSourceParam}${headerTitleParam}${fileNameParam}${maybeIconParam}${typeParam}${reportParam}${accountParam}${authTokenParam}${fileNameParam}${attachmentLinkParam}` as const;
         },
     },
     REPORT_PARTICIPANTS: {

src/components/AttachmentPicker/index.native.tsx

@@ -19,10 +19,10 @@
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
-import type IconAsset from '@src/types/utils/IconAsset';
+import type {IconAsset} from '@src/types/utils/ImageTypes';
 import launchCamera from './launchCamera/launchCamera';
 import type AttachmentPickerProps from './types';
 

src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx

@@ -8,7 +8,7 @@
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import type IconAsset from '@src/types/utils/IconAsset';
+import type {IconAsset} from '@src/types/utils/ImageTypes';
 
 type DefaultAttachmentViewProps = {
     /** The name of the file */
@@ -42,7 +42,7 @@
             <View style={styles.mr2}>
                 <Icon
                     fill={theme.icon}
                     src={icon ?? Expensicons.Paperclip}
                 />
             </View>
 
@@ -52,7 +52,7 @@
                     <View style={styles.ml2}>
                         <Icon
                             fill={theme.icon}
                             src={Expensicons.Download}
                         />
                     </View>
                 </Tooltip>

src/components/Attachments/types.ts

@@ -1,5 +1,5 @@
 import type {FileObject} from '@components/AttachmentModal';
-import type IconAsset from '@src/types/utils/IconAsset';
+import type {IconAsset} from '@src/types/utils/ImageTypes';
 
 type AttachmentSource = string | IconAsset | number;
 

src/components/AvatarCropModal/AvatarCropModal.tsx

@@ -23,7 +23,7 @@
 import cropOrRotateImage from '@libs/cropOrRotateImage';
 import type {CustomRNImageManipulatorResult} from '@libs/cropOrRotateImage/types';
 import CONST from '@src/CONST';
-import type IconAsset from '@src/types/utils/IconAsset';
+import type {IconAsset} from '@src/types/utils/ImageTypes';
 import ImageCropView from './ImageCropView';
 import Slider from './Slider';
 
@@ -390,7 +390,7 @@
                             />
                             <View style={[styles.mt5, styles.justifyContentBetween, styles.alignItemsCenter, styles.flexRow, StyleUtils.getWidthStyle(imageContainerSize)]}>
                                 <Icon
                                     src={Expensicons.Zoom}
                                     fill={theme.icon}
                                 />
 
@@ -412,7 +412,7 @@
                                 >
                                     <View>
                                         <Button
                                             icon={Expensicons.Rotate}
                                             iconFill={theme.icon}
                                             onPress={rotateImage}
                                         />

src/components/AvatarCropModal/ImageCropView.tsx

@@ -9,7 +9,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
-import type IconAsset from '@src/types/utils/IconAsset';
+import type {IconAsset} from '@src/types/utils/ImageTypes';
 
 type ImageCropViewProps = {
     /** Link to image for cropping   */