Merge pull request #75241 from dmkt9/fix/73744

Author: cead22

src/components/Icon/chunks/illustrations.chunk.ts

@@ -11,6 +11,7 @@ import LaptopWithSecondScreenSync from '@assets/images/laptop-with-second-screen
 import LaptopWithSecondScreenX from '@assets/images/laptop-with-second-screen-x.svg';
 // Product Illustrations
 import TeleScope from '@assets/images/product-illustrations/telescope.svg';
+import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg';
 // Simple Illustrations - Core ones that are actually used
 import Accounting from '@assets/images/simple-illustrations/simple-illustration__accounting.svg';
 import BlueShield from '@assets/images/simple-illustrations/simple-illustration__blueshield.svg';
@@ -51,6 +52,7 @@ const Illustrations = {
     // Product Illustrations
     TeleScope,
     Telescope: TeleScope, // Alias for consistency
+    ToddBehindCloud,
 
     // Simple Illustrations
     Accounting,

src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx

@@ -12,8 +12,8 @@ import Button from '@components/Button';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderGap from '@components/HeaderGap';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import * as Illustrations from '@components/Icon/Illustrations';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -60,11 +60,13 @@ function AttachmentModalBaseContent({
     AttachmentContent,
     onCarouselAttachmentChange = () => {},
     transaction: transactionProp,
+    shouldCloseOnSwipeDown = false,
 }: AttachmentModalBaseContentProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
+    const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud']);
 
     // This logic is used to ensure that the source is updated when the source changes and
     // that the initially provided source is always used as a fallback.
@@ -204,8 +206,9 @@ function AttachmentModalBaseContent({
             onTap: () => {},
             onScaleChanged: () => {},
             onAttachmentError: setAttachmentError,
+            ...(shouldCloseOnSwipeDown ? {onSwipeDown: onClose} : {}),
         }),
-        [falseSV, sourceForAttachmentView, setAttachmentError],
+        [falseSV, sourceForAttachmentView, setAttachmentError, shouldCloseOnSwipeDown, onClose],
     );
 
     const shouldDisplayContent = !shouldShowNotFoundPage && !isLoading;
@@ -305,7 +308,7 @@ function AttachmentModalBaseContent({
                 {isLoading && <FullScreenLoadingIndicator testID="attachment-loading-spinner" />}
                 {shouldShowNotFoundPage && !isLoading && (
                     <BlockingView
-                        icon={Illustrations.ToddBehindCloud}
+                        icon={illustrations.ToddBehindCloud}
                         iconWidth={variables.modalTopIconWidth}
                         iconHeight={variables.modalTopIconHeight}
                         title={translate('notFound.notHere')}

src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts

@@ -118,6 +118,9 @@ type AttachmentModalBaseContentProps = {
 
     /** Transaction object. When provided, will be used instead of fetching from Onyx. */
     transaction?: OnyxEntry<OnyxTypes.Transaction>;
+
+    /** Allows users to swipe down to close the modal */
+    shouldCloseOnSwipeDown?: boolean;
 };
 
 export type {

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

@@ -54,6 +54,7 @@ function ProfileAvatarModalContent({navigation, route}: AttachmentModalScreenPro
             shouldShowNotFoundPage,
             maybeIcon: true,
             onDownloadAttachment,
+            shouldCloseOnSwipeDown: true,
         }),
         [headerTitle, isLoading, onDownloadAttachment, originalFileName, shouldShowNotFoundPage, source],
     );

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

@@ -38,6 +38,7 @@ function WorkspaceAvatarModalContent({navigation, route}: AttachmentModalScreenP
             isWorkspaceAvatar: true,
             maybeIcon: true,
             onDownloadAttachment,
+            shouldCloseOnSwipeDown: true,
         }),
         [headerTitle, isLoading, onDownloadAttachment, originalFileName, shouldShowNotFoundPage, source],
     );

src/pages/media/AttachmentModalScreen/routes/report/ReportAvatarModalContent.tsx

@@ -61,6 +61,7 @@ function ReportAvatarModalContent({navigation, route}: AttachmentModalScreenProp
             isLoading,
             maybeIcon: true,
             onDownloadAttachment,
+            shouldCloseOnSwipeDown: true,
         }),
         [attachment, shouldShowNotFoundPage, isLoading, onDownloadAttachment],
     );