Merge pull request #37630 from margelo/fix/freezing-swipe-down-to-clo…

…se-gesture fix: no action after swipe down to close action
Expensify · Mar 5, 2024 · 9c49ab6 · 9c49ab6
2 parents e7a067d + a534558
commit 9c49ab6
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 25 deletions.
diff --git 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';
@@ -28,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';
@@ -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,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],
+    );
 
     return (
         <>
@@ -518,6 +534,7 @@ function AttachmentModal({
                             <AttachmentCarousel
                                 report={report}
                                 onNavigate={onNavigate}
+                                onClose={closeModal}
                                 source={source}
                                 onToggleKeyboard={updateConfirmButtonVisibility}
                                 setDownloadButtonVisibility={setDownloadButtonVisibility}
@@ -527,19 +544,21 @@ function AttachmentModal({
                             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}
-                                />
+                                <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]}
+                                        source={sourceForAttachmentView}
+                                        isAuthTokenRequired={isAuthTokenRequired}
+                                        file={file}
+                                        onToggleKeyboard={updateConfirmButtonVisibility}
+                                        isWorkspaceAvatar={isWorkspaceAvatar}
+                                        maybeIcon={maybeIcon}
+                                        fallbackSource={fallbackSource}
+                                        isUsedInAttachmentModal
+                                        transactionID={transaction?.transactionID}
+                                    />
+                                </AttachmentCarouselPagerContext.Provider>
                             )
                         )}
                     </View>

diff --git 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
@@ -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/Lightbox/index.tsx b/src/components/Lightbox/index.tsx
@@ -78,7 +78,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,
         };

diff --git 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, () => {