From edb7c949322dd89236788d0a511913d62e1313c3 Mon Sep 17 00:00:00 2001
From: kirillzyusko <kiryl@margelo.io>
Date: Fri, 1 Mar 2024 19:35:30 +0100
Subject: [PATCH 1/3] fix: no action after swipe down to close action

---
 src/components/AttachmentModal.tsx            | 184 ++++++++++--------
 .../Pager/AttachmentCarouselPagerContext.ts   |   2 +-
 .../AttachmentCarousel/index.native.js        |   8 +-
 .../MultiGestureCanvas/usePanGesture.ts       |   8 +-
 4 files changed, 107 insertions(+), 95 deletions(-)

diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index 7f0178863fc9..89250fffc2f1 100755
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -4,6 +4,7 @@ import {Animated, Keyboard, View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
+import { useSharedValue } from 'react-native-reanimated';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -39,6 +40,7 @@ import * as Expensicons from './Icon/Expensicons';
 import * as Illustrations from './Icon/Illustrations';
 import Modal from './Modal';
 import SafeAreaConsumer from './SafeAreaConsumer';
+import AttachmentCarouselPagerContext from './Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
 
 /**
  * Modal render prop component that exposes modal launching triggers that can be used
@@ -184,6 +186,7 @@ function AttachmentModal({
     const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(false);
     const [confirmButtonFadeAnimation] = useState(() => new Animated.Value(1));
     const [isDownloadButtonReadyToBeShown, setIsDownloadButtonReadyToBeShown] = React.useState(true);
+    const nope = useSharedValue(false);
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
     const isOverlayModalVisible = (isReceiptAttachment && isDeleteReceiptConfirmModalVisible) || (!isReceiptAttachment && isAttachmentInvalid);
 
@@ -466,6 +469,16 @@ function AttachmentModal({
         shouldShowDownloadButton = allowDownload && isDownloadButtonReadyToBeShown && !isReceiptAttachment && !isOffline;
         shouldShowThreeDotsButton = isReceiptAttachment && isModalOpen && threeDotsMenuItems.length !== 0;
     }
+    const context = useMemo(() => ({
+        pagerItems: [],
+        activePage: 0,
+        pagerRef: undefined,
+        isPagerScrolling: nope,
+        isScrollEnabled: nope,
+        onTap: () => {},
+        onScaleChanged: () => {},
+        onSwipeDown: closeModal,
+    }), [closeModal, nope]);
 
     return (
         <>
@@ -485,94 +498,97 @@ function AttachmentModal({
                 propagateSwipe
             >
                 <GestureHandlerRootView style={styles.flex1}>
-                    {isSmallScreenWidth && <HeaderGap />}
-                    <HeaderWithBackButton
-                        title={headerTitleNew}
-                        shouldShowBorderBottom
-                        shouldShowDownloadButton={shouldShowDownloadButton}
-                        onDownloadButtonPress={() => downloadAttachment()}
-                        shouldShowCloseButton={!isSmallScreenWidth}
-                        shouldShowBackButton={isSmallScreenWidth}
-                        onBackButtonPress={closeModal}
-                        onCloseButtonPress={closeModal}
-                        shouldShowThreeDotsButton={shouldShowThreeDotsButton}
-                        threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
-                        threeDotsMenuItems={threeDotsMenuItems}
-                        shouldOverlayDots
-                    />
-                    <View style={styles.imageModalImageCenterContainer}>
-                        {isLoading && <FullScreenLoadingIndicator />}
-                        {shouldShowNotFoundPage && !isLoading && (
-                            <BlockingView
-                                icon={Illustrations.ToddBehindCloud}
-                                iconWidth={variables.modalTopIconWidth}
-                                iconHeight={variables.modalTopIconHeight}
-                                title={translate('notFound.notHere')}
-                                subtitle={translate('notFound.pageNotFound')}
-                                linkKey="notFound.goBackHome"
-                                shouldShowLink
-                                onLinkPress={() => Navigation.dismissModal()}
-                            />
-                        )}
-                        {!isEmptyObject(report) && !isReceiptAttachment ? (
-                            <AttachmentCarousel
-                                report={report}
-                                onNavigate={onNavigate}
-                                source={source}
-                                onToggleKeyboard={updateConfirmButtonVisibility}
-                                setDownloadButtonVisibility={setDownloadButtonVisibility}
-                            />
-                        ) : (
-                            !!sourceForAttachmentView &&
-                            shouldLoadAttachment &&
-                            !isLoading &&
-                            !shouldShowNotFoundPage && (
-                                <AttachmentView
-                                    // @ts-expect-error TODO: Remove this once Attachments (https://github.com/Expensify/App/issues/24969) is migrated to TypeScript.
-                                    containerStyles={[styles.mh5]}
-                                    source={sourceForAttachmentView}
-                                    isAuthTokenRequired={isAuthTokenRequired}
-                                    file={file}
+                    <AttachmentCarouselPagerContext.Provider value={context}>
+                        {isSmallScreenWidth && <HeaderGap />}
+                        <HeaderWithBackButton
+                            title={headerTitleNew}
+                            shouldShowBorderBottom
+                            shouldShowDownloadButton={shouldShowDownloadButton}
+                            onDownloadButtonPress={() => downloadAttachment()}
+                            shouldShowCloseButton={!isSmallScreenWidth}
+                            shouldShowBackButton={isSmallScreenWidth}
+                            onBackButtonPress={closeModal}
+                            onCloseButtonPress={closeModal}
+                            shouldShowThreeDotsButton={shouldShowThreeDotsButton}
+                            threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
+                            threeDotsMenuItems={threeDotsMenuItems}
+                            shouldOverlayDots
+                        />
+                        <View style={styles.imageModalImageCenterContainer}>
+                            {isLoading && <FullScreenLoadingIndicator />}
+                            {shouldShowNotFoundPage && !isLoading && (
+                                <BlockingView
+                                    icon={Illustrations.ToddBehindCloud}
+                                    iconWidth={variables.modalTopIconWidth}
+                                    iconHeight={variables.modalTopIconHeight}
+                                    title={translate('notFound.notHere')}
+                                    subtitle={translate('notFound.pageNotFound')}
+                                    linkKey="notFound.goBackHome"
+                                    shouldShowLink
+                                    onLinkPress={() => Navigation.dismissModal()}
+                                />
+                            )}
+                            {!isEmptyObject(report) && !isReceiptAttachment ? (
+                                <AttachmentCarousel
+                                    report={report}
+                                    onNavigate={onNavigate}
+                                    onClose={closeModal}
+                                    source={source}
                                     onToggleKeyboard={updateConfirmButtonVisibility}
-                                    isWorkspaceAvatar={isWorkspaceAvatar}
-                                    maybeIcon={maybeIcon}
-                                    fallbackSource={fallbackSource}
-                                    isUsedInAttachmentModal
-                                    transactionID={transaction?.transactionID}
+                                    setDownloadButtonVisibility={setDownloadButtonVisibility}
                                 />
-                            )
-                        )}
-                    </View>
-                    {/* If we have an onConfirm method show a confirmation button */}
-                    {!!onConfirm && (
-                        <SafeAreaConsumer>
-                            {({safeAreaPaddingBottomStyle}) => (
-                                <Animated.View style={[StyleUtils.fade(confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
-                                    <Button
-                                        success
-                                        style={[styles.buttonConfirm, isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]}
-                                        textStyles={[styles.buttonConfirmText]}
-                                        text={translate('common.send')}
-                                        onPress={submitAndClose}
-                                        isDisabled={isConfirmButtonDisabled}
-                                        pressOnEnter
+                            ) : (
+                                !!sourceForAttachmentView &&
+                                shouldLoadAttachment &&
+                                !isLoading &&
+                                !shouldShowNotFoundPage && (
+                                    <AttachmentView
+                                        // @ts-expect-error TODO: Remove this once Attachments (https://github.com/Expensify/App/issues/24969) is migrated to TypeScript.
+                                        containerStyles={[styles.mh5]}
+                                        source={sourceForAttachmentView}
+                                        isAuthTokenRequired={isAuthTokenRequired}
+                                        file={file}
+                                        onToggleKeyboard={updateConfirmButtonVisibility}
+                                        isWorkspaceAvatar={isWorkspaceAvatar}
+                                        maybeIcon={maybeIcon}
+                                        fallbackSource={fallbackSource}
+                                        isUsedInAttachmentModal
+                                        transactionID={transaction?.transactionID}
                                     />
-                                </Animated.View>
+                                )
                             )}
-                        </SafeAreaConsumer>
-                    )}
-                    {isReceiptAttachment && (
-                        <ConfirmModal
-                            title={translate('receipt.deleteReceipt')}
-                            isVisible={isDeleteReceiptConfirmModalVisible}
-                            onConfirm={deleteAndCloseModal}
-                            onCancel={closeConfirmModal}
-                            prompt={translate('receipt.deleteConfirmation')}
-                            confirmText={translate('common.delete')}
-                            cancelText={translate('common.cancel')}
-                            danger
-                        />
-                    )}
+                        </View>
+                        {/* If we have an onConfirm method show a confirmation button */}
+                        {!!onConfirm && (
+                            <SafeAreaConsumer>
+                                {({safeAreaPaddingBottomStyle}) => (
+                                    <Animated.View style={[StyleUtils.fade(confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
+                                        <Button
+                                            success
+                                            style={[styles.buttonConfirm, isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]}
+                                            textStyles={[styles.buttonConfirmText]}
+                                            text={translate('common.send')}
+                                            onPress={submitAndClose}
+                                            isDisabled={isConfirmButtonDisabled}
+                                            pressOnEnter
+                                        />
+                                    </Animated.View>
+                                )}
+                            </SafeAreaConsumer>
+                        )}
+                        {isReceiptAttachment && (
+                            <ConfirmModal
+                                title={translate('receipt.deleteReceipt')}
+                                isVisible={isDeleteReceiptConfirmModalVisible}
+                                onConfirm={deleteAndCloseModal}
+                                onCancel={closeConfirmModal}
+                                prompt={translate('receipt.deleteConfirmation')}
+                                confirmText={translate('common.delete')}
+                                cancelText={translate('common.cancel')}
+                                danger
+                            />
+                        )}
+                    </AttachmentCarouselPagerContext.Provider>
                 </GestureHandlerRootView>
             </Modal>
             {!isReceiptAttachment && (
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts
index f1b9d16de654..87cabecc5878 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts
+++ b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts
@@ -21,7 +21,7 @@ type AttachmentCarouselPagerContextValue = {
 
     /** The index of the active page */
     activePage: number;
-    pagerRef: ForwardedRef<PagerView>;
+    pagerRef?: ForwardedRef<PagerView>;
     isPagerScrolling: SharedValue<boolean>;
     isScrollEnabled: SharedValue<boolean>;
     onTap: () => void;
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js
index ed618151e594..f02b6690ae8e 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.js
+++ b/src/components/Attachments/AttachmentCarousel/index.native.js
@@ -17,7 +17,7 @@ import extractAttachmentsFromReport from './extractAttachmentsFromReport';
 import AttachmentCarouselPager from './Pager';
 import useCarouselArrows from './useCarouselArrows';
 
-function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate}) {
+function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, onClose}) {
     const styles = useThemeStyles();
     const pagerRef = useRef(null);
     const [page, setPage] = useState();
@@ -102,10 +102,6 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
         [setShouldShowArrows],
     );
 
-    const goBack = useCallback(() => {
-        Navigation.goBack();
-    }, []);
-
     const containerStyles = [styles.flex1, styles.attachmentCarouselContainer];
 
     if (page == null) {
@@ -143,7 +139,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                         activeSource={activeSource}
                         onRequestToggleArrows={toggleArrows}
                         onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
-                        onClose={goBack}
+                        onClose={onClose}
                         ref={pagerRef}
                     />
                 </>
diff --git a/src/components/MultiGestureCanvas/usePanGesture.ts b/src/components/MultiGestureCanvas/usePanGesture.ts
index 97843e118871..903f384dd525 100644
--- a/src/components/MultiGestureCanvas/usePanGesture.ts
+++ b/src/components/MultiGestureCanvas/usePanGesture.ts
@@ -141,11 +141,11 @@ const usePanGesture = ({
             if (finalTranslateY > SNAP_POINT && zoomScale.value <= 1) {
                 offsetY.value = withSpring(SNAP_POINT_HIDDEN, SPRING_CONFIG, () => {
                     isSwipingDownToClose.value = false;
-                });
 
-                if (onSwipeDown) {
-                    runOnJS(onSwipeDown)();
-                }
+                    if (onSwipeDown) {
+                        runOnJS(onSwipeDown)();
+                    }
+                });
             } else {
                 // Animated back to the boundary
                 offsetY.value = withSpring(clampedOffset.y, SPRING_CONFIG, () => {

From 252b322f42fc2635f6f5de5821c170724b0a4d93 Mon Sep 17 00:00:00 2001
From: kirillzyusko <kiryl@margelo.io>
Date: Mon, 4 Mar 2024 12:51:47 +0100
Subject: [PATCH 2/3] chore: fix after review

---
 src/components/AttachmentModal.tsx | 154 ++++++++++++++---------------
 src/components/Lightbox/index.tsx  |   2 +-
 2 files changed, 78 insertions(+), 78 deletions(-)

diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index 89250fffc2f1..645877678181 100755
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -498,50 +498,50 @@ function AttachmentModal({
                 propagateSwipe
             >
                 <GestureHandlerRootView style={styles.flex1}>
-                    <AttachmentCarouselPagerContext.Provider value={context}>
-                        {isSmallScreenWidth && <HeaderGap />}
-                        <HeaderWithBackButton
-                            title={headerTitleNew}
-                            shouldShowBorderBottom
-                            shouldShowDownloadButton={shouldShowDownloadButton}
-                            onDownloadButtonPress={() => downloadAttachment()}
-                            shouldShowCloseButton={!isSmallScreenWidth}
-                            shouldShowBackButton={isSmallScreenWidth}
-                            onBackButtonPress={closeModal}
-                            onCloseButtonPress={closeModal}
-                            shouldShowThreeDotsButton={shouldShowThreeDotsButton}
-                            threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
-                            threeDotsMenuItems={threeDotsMenuItems}
-                            shouldOverlayDots
-                        />
-                        <View style={styles.imageModalImageCenterContainer}>
-                            {isLoading && <FullScreenLoadingIndicator />}
-                            {shouldShowNotFoundPage && !isLoading && (
-                                <BlockingView
-                                    icon={Illustrations.ToddBehindCloud}
-                                    iconWidth={variables.modalTopIconWidth}
-                                    iconHeight={variables.modalTopIconHeight}
-                                    title={translate('notFound.notHere')}
-                                    subtitle={translate('notFound.pageNotFound')}
-                                    linkKey="notFound.goBackHome"
-                                    shouldShowLink
-                                    onLinkPress={() => Navigation.dismissModal()}
-                                />
-                            )}
-                            {!isEmptyObject(report) && !isReceiptAttachment ? (
-                                <AttachmentCarousel
-                                    report={report}
-                                    onNavigate={onNavigate}
-                                    onClose={closeModal}
-                                    source={source}
-                                    onToggleKeyboard={updateConfirmButtonVisibility}
-                                    setDownloadButtonVisibility={setDownloadButtonVisibility}
-                                />
-                            ) : (
-                                !!sourceForAttachmentView &&
-                                shouldLoadAttachment &&
-                                !isLoading &&
-                                !shouldShowNotFoundPage && (
+                    {isSmallScreenWidth && <HeaderGap />}
+                    <HeaderWithBackButton
+                        title={headerTitleNew}
+                        shouldShowBorderBottom
+                        shouldShowDownloadButton={shouldShowDownloadButton}
+                        onDownloadButtonPress={() => downloadAttachment()}
+                        shouldShowCloseButton={!isSmallScreenWidth}
+                        shouldShowBackButton={isSmallScreenWidth}
+                        onBackButtonPress={closeModal}
+                        onCloseButtonPress={closeModal}
+                        shouldShowThreeDotsButton={shouldShowThreeDotsButton}
+                        threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
+                        threeDotsMenuItems={threeDotsMenuItems}
+                        shouldOverlayDots
+                    />
+                    <View style={styles.imageModalImageCenterContainer}>
+                        {isLoading && <FullScreenLoadingIndicator />}
+                        {shouldShowNotFoundPage && !isLoading && (
+                            <BlockingView
+                                icon={Illustrations.ToddBehindCloud}
+                                iconWidth={variables.modalTopIconWidth}
+                                iconHeight={variables.modalTopIconHeight}
+                                title={translate('notFound.notHere')}
+                                subtitle={translate('notFound.pageNotFound')}
+                                linkKey="notFound.goBackHome"
+                                shouldShowLink
+                                onLinkPress={() => Navigation.dismissModal()}
+                            />
+                        )}
+                        {!isEmptyObject(report) && !isReceiptAttachment ? (
+                            <AttachmentCarousel
+                                report={report}
+                                onNavigate={onNavigate}
+                                onClose={closeModal}
+                                source={source}
+                                onToggleKeyboard={updateConfirmButtonVisibility}
+                                setDownloadButtonVisibility={setDownloadButtonVisibility}
+                            />
+                        ) : (
+                            !!sourceForAttachmentView &&
+                            shouldLoadAttachment &&
+                            !isLoading &&
+                            !shouldShowNotFoundPage && (
+                                <AttachmentCarouselPagerContext.Provider value={context}>
                                     <AttachmentView
                                         // @ts-expect-error TODO: Remove this once Attachments (https://github.com/Expensify/App/issues/24969) is migrated to TypeScript.
                                         containerStyles={[styles.mh5]}
@@ -555,40 +555,40 @@ function AttachmentModal({
                                         isUsedInAttachmentModal
                                         transactionID={transaction?.transactionID}
                                     />
-                                )
-                            )}
-                        </View>
-                        {/* If we have an onConfirm method show a confirmation button */}
-                        {!!onConfirm && (
-                            <SafeAreaConsumer>
-                                {({safeAreaPaddingBottomStyle}) => (
-                                    <Animated.View style={[StyleUtils.fade(confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
-                                        <Button
-                                            success
-                                            style={[styles.buttonConfirm, isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]}
-                                            textStyles={[styles.buttonConfirmText]}
-                                            text={translate('common.send')}
-                                            onPress={submitAndClose}
-                                            isDisabled={isConfirmButtonDisabled}
-                                            pressOnEnter
-                                        />
-                                    </Animated.View>
-                                )}
-                            </SafeAreaConsumer>
+                                </AttachmentCarouselPagerContext.Provider>
+                            )
                         )}
-                        {isReceiptAttachment && (
-                            <ConfirmModal
-                                title={translate('receipt.deleteReceipt')}
-                                isVisible={isDeleteReceiptConfirmModalVisible}
-                                onConfirm={deleteAndCloseModal}
-                                onCancel={closeConfirmModal}
-                                prompt={translate('receipt.deleteConfirmation')}
-                                confirmText={translate('common.delete')}
-                                cancelText={translate('common.cancel')}
-                                danger
-                            />
-                        )}
-                    </AttachmentCarouselPagerContext.Provider>
+                    </View>
+                    {/* If we have an onConfirm method show a confirmation button */}
+                    {!!onConfirm && (
+                        <SafeAreaConsumer>
+                            {({safeAreaPaddingBottomStyle}) => (
+                                <Animated.View style={[StyleUtils.fade(confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
+                                    <Button
+                                        success
+                                        style={[styles.buttonConfirm, isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]}
+                                        textStyles={[styles.buttonConfirmText]}
+                                        text={translate('common.send')}
+                                        onPress={submitAndClose}
+                                        isDisabled={isConfirmButtonDisabled}
+                                        pressOnEnter
+                                    />
+                                </Animated.View>
+                            )}
+                        </SafeAreaConsumer>
+                    )}
+                    {isReceiptAttachment && (
+                        <ConfirmModal
+                            title={translate('receipt.deleteReceipt')}
+                            isVisible={isDeleteReceiptConfirmModalVisible}
+                            onConfirm={deleteAndCloseModal}
+                            onCancel={closeConfirmModal}
+                            prompt={translate('receipt.deleteConfirmation')}
+                            confirmText={translate('common.delete')}
+                            cancelText={translate('common.cancel')}
+                            danger
+                        />
+                    )}
                 </GestureHandlerRootView>
             </Modal>
             {!isReceiptAttachment && (
diff --git a/src/components/Lightbox/index.tsx b/src/components/Lightbox/index.tsx
index 69fa0d5e6e41..a769998aa785 100644
--- a/src/components/Lightbox/index.tsx
+++ b/src/components/Lightbox/index.tsx
@@ -79,7 +79,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan
         const foundPage = attachmentCarouselPagerContext.pagerItems.findIndex((item) => item.source === uri);
         return {
             ...attachmentCarouselPagerContext,
-            isUsedInCarousel: true,
+            isUsedInCarousel: !!attachmentCarouselPagerContext.pagerRef,
             isSingleCarouselItem: attachmentCarouselPagerContext.pagerItems.length === 1,
             page: foundPage,
         };

From a53455854fab2f6bde5e406e246304cb125d9529 Mon Sep 17 00:00:00 2001
From: kirillzyusko <kiryl@margelo.io>
Date: Mon, 4 Mar 2024 13:04:36 +0100
Subject: [PATCH 3/3] fix: CI

---
 src/components/AttachmentModal.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index 645877678181..eed40d75387e 100755
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -4,7 +4,7 @@ import {Animated, Keyboard, View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
-import { useSharedValue } from 'react-native-reanimated';
+import {useSharedValue} from 'react-native-reanimated';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -29,6 +29,7 @@ import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type ModalType from '@src/types/utils/ModalType';
 import AttachmentCarousel from './Attachments/AttachmentCarousel';
+import AttachmentCarouselPagerContext from './Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
 import AttachmentView from './Attachments/AttachmentView';
 import BlockingView from './BlockingViews/BlockingView';
 import Button from './Button';
@@ -40,7 +41,6 @@ import * as Expensicons from './Icon/Expensicons';
 import * as Illustrations from './Icon/Illustrations';
 import Modal from './Modal';
 import SafeAreaConsumer from './SafeAreaConsumer';
-import AttachmentCarouselPagerContext from './Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
 
 /**
  * Modal render prop component that exposes modal launching triggers that can be used
@@ -469,16 +469,19 @@ function AttachmentModal({
         shouldShowDownloadButton = allowDownload && isDownloadButtonReadyToBeShown && !isReceiptAttachment && !isOffline;
         shouldShowThreeDotsButton = isReceiptAttachment && isModalOpen && threeDotsMenuItems.length !== 0;
     }
-    const context = useMemo(() => ({
-        pagerItems: [],
-        activePage: 0,
-        pagerRef: undefined,
-        isPagerScrolling: nope,
-        isScrollEnabled: nope,
-        onTap: () => {},
-        onScaleChanged: () => {},
-        onSwipeDown: closeModal,
-    }), [closeModal, nope]);
+    const context = useMemo(
+        () => ({
+            pagerItems: [],
+            activePage: 0,
+            pagerRef: undefined,
+            isPagerScrolling: nope,
+            isScrollEnabled: nope,
+            onTap: () => {},
+            onScaleChanged: () => {},
+            onSwipeDown: closeModal,
+        }),
+        [closeModal, nope],
+    );
 
     return (
         <>