Extract gesture logic from MultiGestureCanvas to hooks and improve code

src/components/AttachmentModal.js

@@ -501,7 +501,6 @@ function AttachmentModal(props) {
                                 report={props.report}
                                 onNavigate={onNavigate}
                                 source={props.source}
-                                onClose={closeModal}
                                 onToggleKeyboard={updateConfirmButtonVisibility}
                                 setDownloadButtonVisibility={setDownloadButtonVisibility}
                             />

src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts

@@ -0,0 +1,17 @@
+import type {ForwardedRef} from 'react';
+import {createContext} from 'react';
+import type PagerView from 'react-native-pager-view';
+import type {SharedValue} from 'react-native-reanimated';
+
+type AttachmentCarouselPagerContextValue = {
+    pagerRef: ForwardedRef<PagerView>;
+    isPagerScrolling: SharedValue<boolean>;
+    isScrollEnabled: SharedValue<boolean>;
+    onTap: () => void;
+    onScaleChanged: (scale: number) => void;
+};
+
+const AttachmentCarouselPagerContext = createContext<AttachmentCarouselPagerContextValue | null>(null);
+
+export default AttachmentCarouselPagerContext;
+export type {AttachmentCarouselPagerContextValue};

src/components/Attachments/AttachmentCarousel/Pager/index.tsx

@@ -0,0 +1,143 @@
+import type {ForwardedRef} from 'react';
+import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+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 PagerView from 'react-native-pager-view';
+import Animated, {useAnimatedProps, useSharedValue} from 'react-native-reanimated';
+import useThemeStyles from '@hooks/useThemeStyles';
+import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
+import usePageScrollHandler from './usePageScrollHandler';
+
+const WrappedPagerView = createNativeWrapper(PagerView) as React.ForwardRefExoticComponent<
+    PagerViewProps & NativeViewGestureHandlerProps & React.RefAttributes<React.Component<PagerViewProps>>
+>;
+const AnimatedPagerView = Animated.createAnimatedComponent(WrappedPagerView);
+
+type AttachmentCarouselPagerHandle = {
+    setPage: (selectedPage: number) => void;
+};
+
+type PagerItem = {
+    key: string;
+    url: string;
+    source: string;
+};
+
+type AttachmentCarouselPagerProps = {
+    items: PagerItem[];
+    renderItem: (props: {item: PagerItem; index: number; isActive: boolean}) => React.ReactNode;
+    initialIndex: number;
+    onPageSelected: () => void;
+    onRequestToggleArrows: (showArrows?: boolean) => void;
+};
+
+function AttachmentCarouselPager({items, renderItem, initialIndex, onPageSelected, onRequestToggleArrows}: AttachmentCarouselPagerProps, ref: ForwardedRef<AttachmentCarouselPagerHandle>) {
+    const styles = useThemeStyles();
+    const pagerRef = useRef<PagerView>(null);
+
+    const scale = useRef(1);
+    const isPagerScrolling = useSharedValue(false);
+    const isScrollEnabled = useSharedValue(true);
+
+    const activePage = useSharedValue(initialIndex);
+    const [activePageState, setActivePageState] = useState(initialIndex);
+
+    const pageScrollHandler = usePageScrollHandler(
+        {
+            onPageScroll: (e) => {
+                'worklet';
+
+                activePage.value = e.position;
+                isPagerScrolling.value = e.offset !== 0;
+            },
+        },
+        [],
+    );
+
+    useEffect(() => {
+        setActivePageState(initialIndex);
+        activePage.value = initialIndex;
+    }, [activePage, initialIndex]);
+
+    const handleScaleChange = useCallback(
+        (newScale: number) => {
+            if (newScale === scale.current) {
+                return;
+            }
+
+            scale.current = newScale;
+
+            const newIsScrollEnabled = newScale === 1;
+
+            if (isScrollEnabled.value === newIsScrollEnabled) {
+                return;
+            }
+
+            isScrollEnabled.value = newIsScrollEnabled;
+            onRequestToggleArrows(newIsScrollEnabled);
+        },
+        [isScrollEnabled, onRequestToggleArrows],
+    );
+
+    const onTap = useCallback(() => {
+        if (!isScrollEnabled.value) {
+            return;
+        }
+
+        onRequestToggleArrows();
+    }, [isScrollEnabled.value, onRequestToggleArrows]);
+
+    const contextValue = useMemo(
+        () => ({
+            pagerRef,
+            isPagerScrolling,
+            isScrollEnabled,
+            onTap,
+            onScaleChanged: handleScaleChange,
+        }),
+        [isPagerScrolling, isScrollEnabled, onTap, handleScaleChange],
+    );
+
+    const animatedProps = useAnimatedProps(() => ({
+        scrollEnabled: isScrollEnabled.value,
+    }));
+
+    useImperativeHandle<AttachmentCarouselPagerHandle, AttachmentCarouselPagerHandle>(
+        ref,
+        () => ({
+            setPage: (selectedPage) => {
+                pagerRef.current?.setPage(selectedPage);
+            },
+        }),
+        [],
+    );
+
+    return (
+        <AttachmentCarouselPagerContext.Provider value={contextValue}>
+            <AnimatedPagerView
+                pageMargin={40}
+                offscreenPageLimit={1}
+                onPageScroll={pageScrollHandler}
+                onPageSelected={onPageSelected}
+                ref={pagerRef}
+                style={styles.flex1}
+                initialPage={initialIndex}
+                animatedProps={animatedProps}
+            >
+                {items.map((item, index) => (
+                    <View
+                        key={item.source}
+                        style={styles.flex1}
+                    >
+                        {renderItem({item, index, isActive: index === activePageState})}
+                    </View>
+                ))}
+            </AnimatedPagerView>
+        </AttachmentCarouselPagerContext.Provider>
+    );
+}
+AttachmentCarouselPager.displayName = 'AttachmentCarouselPager';
+
+export default React.forwardRef(AttachmentCarouselPager);

src/components/Attachments/AttachmentCarousel/Pager/usePageScrollHandler.ts

@@ -0,0 +1,37 @@
+import type {PagerViewProps} from 'react-native-pager-view';
+import {useEvent, useHandler} from 'react-native-reanimated';
+
+type PageScrollHandler = NonNullable<PagerViewProps['onPageScroll']>;
+
+type PageScrollEventData = Parameters<PageScrollHandler>[0]['nativeEvent'];
+type PageScrollContext = Record<string, unknown>;
+
+// Reanimated doesn't expose the type for animated event handlers, therefore we must infer it from the useHandler hook.
+// The AnimatedPageScrollHandler type is the type of the onPageScroll prop from react-native-pager-view as an animated handler.
+type AnimatedHandlers = Parameters<typeof useHandler<PageScrollEventData, PageScrollContext>>[0];
+type AnimatedPageScrollHandler = AnimatedHandlers[string];
+
+type Handlers = {
+    onPageScroll?: AnimatedPageScrollHandler;
+};
+type Deps = Parameters<typeof useHandler>[1];
+
+const usePageScrollHandler = (handlers: Handlers, dependencies: Deps): PageScrollHandler => {
+    const {context, doDependenciesDiffer} = useHandler(handlers, dependencies);
+    const subscribeForEvents = ['onPageScroll'];
+
+    return useEvent(
+        (event) => {
+            'worklet';
+
+            const {onPageScroll} = handlers;
+            if (onPageScroll && event.eventName.endsWith('onPageScroll')) {
+                onPageScroll(event, context);
+            }
+        },
+        subscribeForEvents,
+        doDependenciesDiffer,
+    );
+};
+
+export default usePageScrollHandler;