diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx index 7f0178863fc9..eed40d75387e 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'; @@ -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({ + + + ) )} 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; + pagerRef?: ForwardedRef; isPagerScrolling: SharedValue; isScrollEnabled: SharedValue; 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/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, }; 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, () => {