From 10547df6afbe969021cdec846eb2a3ec7e2291a5 Mon Sep 17 00:00:00 2001 From: Jakub Korytko Date: Mon, 12 May 2025 12:34:25 +0200 Subject: [PATCH 1/3] Replace old gesture handler with new one --- .../AttachmentCarousel/Pager/index.tsx | 43 ++++++++----------- 1 file changed, 19 insertions(+), 24 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx index dac7a71cfd1c..fbf781330591 100644 --- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx +++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx @@ -2,9 +2,7 @@ import type {ForwardedRef, SetStateAction} from 'react'; import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import type {NativeSyntheticEvent} from 'react-native'; import {View} from 'react-native'; -import type {NativeViewGestureHandlerProps} from 'react-native-gesture-handler'; -import {createNativeWrapper} from 'react-native-gesture-handler'; -import type {PagerViewProps} from 'react-native-pager-view'; +import {Gesture, GestureDetector} from 'react-native-gesture-handler'; import PagerView from 'react-native-pager-view'; import Animated, {useAnimatedProps, useSharedValue} from 'react-native-reanimated'; import CarouselItem from '@components/Attachments/AttachmentCarousel/CarouselItem'; @@ -15,14 +13,7 @@ import shouldUseNewPager from '@libs/shouldUseNewPager'; import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext'; import usePageScrollHandler from './usePageScrollHandler'; -const WrappedPagerView = createNativeWrapper(PagerView) as React.ForwardRefExoticComponent< - PagerViewProps & - NativeViewGestureHandlerProps & - React.RefAttributes> & { - useNext: boolean; - } ->; -const AnimatedPagerView = Animated.createAnimatedComponent(WrappedPagerView); +const AnimatedPagerView = Animated.createAnimatedComponent(PagerView); type AttachmentCarouselPagerHandle = { setPage: (selectedPage: number) => void; @@ -135,21 +126,25 @@ function AttachmentCarouselPager( )); + const gestureHandler = Gesture.Native(); + return ( - - {carouselItems} - + + + {carouselItems} + + ); } From 8e8e2bfe1449bd38590433efaff5ce7de83b5dea Mon Sep 17 00:00:00 2001 From: Jakub Korytko Date: Tue, 13 May 2025 14:33:23 +0200 Subject: [PATCH 2/3] Fix carousel panning on native --- .../Pager/AttachmentCarouselPagerContext.ts | 3 +++ .../Attachments/AttachmentCarousel/Pager/index.tsx | 9 +++++---- src/components/Lightbox/index.tsx | 3 +++ src/components/MultiGestureCanvas/index.tsx | 10 ++++++++-- 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts index a9ca8f83697b..2b7367e0b545 100644 --- a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts +++ b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts @@ -44,6 +44,9 @@ type AttachmentCarouselPagerContextValue = { /** Function to call after a swipe down event */ onSwipeDown: () => void; + + /** In case we need a gesture that should work simultaneously with panning in MultiGestureCanvas */ + externalGestureHandler?: GestureType; }; const AttachmentCarouselPagerContext = createContext(null); diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx index fbf781330591..5238aec5da6a 100644 --- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx +++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx @@ -81,6 +81,8 @@ function AttachmentCarouselPager( const extractItemKey = useCallback((item: Attachment, index: number) => `attachmentID-${item.attachmentID}-${index}`, []); + const nativeGestureHandler = Gesture.Native(); + const contextValue = useMemo( () => ({ pagerItems, @@ -91,8 +93,9 @@ function AttachmentCarouselPager( onTap: handleTap, onSwipeDown: onClose, onScaleChanged: handleScaleChange, + externalGestureHandler: nativeGestureHandler, }), - [pagerItems, activePageIndex, isPagerScrolling, isScrollEnabled, handleTap, onClose, handleScaleChange], + [pagerItems, activePageIndex, isPagerScrolling, isScrollEnabled, handleTap, onClose, handleScaleChange, nativeGestureHandler], ); const animatedProps = useAnimatedProps(() => ({ @@ -126,11 +129,9 @@ function AttachmentCarouselPager( )); - const gestureHandler = Gesture.Native(); - return ( - + { if (attachmentCarouselPagerContext === null) { return { @@ -78,6 +79,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan onScaleChanged: () => {}, onSwipeDown: () => {}, pagerRef: undefined, + externalGestureHandler: undefined, }; } @@ -224,6 +226,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan onTap={onTap} onScaleChanged={scaleChange} onSwipeDown={onSwipeDown} + externalGestureHandler={externalGestureHandler} > [styles.flex1, StyleUtils.getMultiGestureCanvasContainerStyle(canvasSize.width)], [StyleUtils, canvasSize.width, styles.flex1]); + const panGestureWrapper = externalGestureHandler ? panGesture.simultaneousWithExternalGesture(externalGestureHandler) : panGesture; + return ( - + e.preventDefault()} From d39d6ea49ceee950b61d1a10ffc9b0f08f622a17 Mon Sep 17 00:00:00 2001 From: Jakub Korytko Date: Tue, 13 May 2025 14:38:12 +0200 Subject: [PATCH 3/3] Fix ESLint error --- src/components/Lightbox/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Lightbox/index.tsx b/src/components/Lightbox/index.tsx index bbdbbf3a81a2..e9ae48eaacda 100644 --- a/src/components/Lightbox/index.tsx +++ b/src/components/Lightbox/index.tsx @@ -12,7 +12,7 @@ import {getCanvasFitScale} from '@components/MultiGestureCanvas/utils'; import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as FileUtils from '@libs/fileDownload/FileUtils'; +import {isLocalFile} from '@libs/fileDownload/FileUtils'; import NUMBER_OF_CONCURRENT_LIGHTBOXES from './numberOfConcurrentLightboxes'; const cachedImageDimensions = new Map(); @@ -203,7 +203,7 @@ function Lightbox({isAuthTokenRequired = false, uri, onScaleChanged: onScaleChan [onScaleChangedContext, onScaleChangedProp], ); - const isLocalFile = FileUtils.isLocalFile(uri); + const isALocalFile = isLocalFile(uri); return ( )} - {isLoading && !isLocalFile && } + {isLoading && !isALocalFile && } )}