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