Image zoom for mobile browser apps

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

@@ -1,5 +1,6 @@
 import type {ForwardedRef} from 'react';
 import {createContext} from 'react';
+import type {GestureType} from 'react-native-gesture-handler';
 import type PagerView from 'react-native-pager-view';
 import type {SharedValue} from 'react-native-reanimated';
 import type {AttachmentSource} from '@components/Attachments/types';
@@ -17,16 +18,28 @@ type AttachmentCarouselPagerItems = {
 };
 
 type AttachmentCarouselPagerContextValue = {
-    /** The list of items that are shown in the pager */
+    /** List of items displayed in the attachment */
     pagerItems: AttachmentCarouselPagerItems[];
 
-    /** The index of the active page */
+    /** Index of the currently active page */
     activePage: number;
-    pagerRef?: ForwardedRef<PagerView>;
+
+    /** Ref to the active attachment */
+    pagerRef?: ForwardedRef<PagerView | GestureType>;
+
+    /** Indicates if the pager is currently scrolling */
     isPagerScrolling: SharedValue<boolean>;
+
+    /** Indicates if scrolling is enabled for the attachment */
     isScrollEnabled: SharedValue<boolean>;
+
+    /** Function to call after a tap event */
     onTap: () => void;
+
+    /** Function to call when the scale changes */
     onScaleChanged: (scale: number) => void;
+
+    /** Function to call after a swipe down event */
     onSwipeDown: () => void;
 };
 

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

@@ -1,4 +1,4 @@
-import type {ForwardedRef} from 'react';
+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';
@@ -8,6 +8,7 @@ import type {PagerViewProps} from 'react-native-pager-view';
 import PagerView from 'react-native-pager-view';
 import Animated, {useAnimatedProps, useSharedValue} from 'react-native-reanimated';
 import CarouselItem from '@components/Attachments/AttachmentCarousel/CarouselItem';
+import useCarouselContextEvents from '@components/Attachments/AttachmentCarousel/useCarouselContextEvents';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import useThemeStyles from '@hooks/useThemeStyles';
 import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
@@ -41,24 +42,21 @@ type AttachmentCarouselPagerProps = {
         >,
     ) => void;
 
-    /**
-     * A callback that can be used to toggle the attachment carousel arrows, when the scale of the image changes.
-     * @param showArrows If set, it will show/hide the arrows. If not set, it will toggle the arrows.
-     */
-    onRequestToggleArrows: (showArrows?: boolean) => void;
-
     /** A callback that is called when swipe-down-to-close gesture happens */
     onClose: () => void;
+
+    /** Sets the visibility of the arrows. */
+    setShouldShowArrows: (show?: SetStateAction<boolean>) => void;
 };
 
 function AttachmentCarouselPager(
-    {items, activeSource, initialPage, onPageSelected, onRequestToggleArrows, onClose}: AttachmentCarouselPagerProps,
+    {items, activeSource, initialPage, setShouldShowArrows, onPageSelected, onClose}: AttachmentCarouselPagerProps,
     ref: ForwardedRef<AttachmentCarouselPagerHandle>,
 ) {
+    const {handleTap, handleScaleChange} = useCarouselContextEvents(setShouldShowArrows);
     const styles = useThemeStyles();
     const pagerRef = useRef<PagerView>(null);
 
-    const scale = useRef(1);
     const isPagerScrolling = useSharedValue(false);
     const isScrollEnabled = useSharedValue(true);
 
@@ -80,42 +78,6 @@ function AttachmentCarouselPager(
     /** The `pagerItems` object that passed down to the context. Later used to detect current page, whether it's a single image gallery etc. */
     const pagerItems = useMemo(() => items.map((item, index) => ({source: item.source, index, isActive: index === activePageIndex})), [activePageIndex, items]);
 
-    /**
-     * This callback is passed to the MultiGestureCanvas/Lightbox through the AttachmentCarouselPagerContext.
-     * It is used to react to zooming/pinching and (mostly) enabling/disabling scrolling on the pager,
-     * as well as enabling/disabling the carousel buttons.
-     */
-    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],
-    );
-
-    /**
-     * This callback is passed to the MultiGestureCanvas/Lightbox through the AttachmentCarouselPagerContext.
-     * It is used to trigger touch events on the pager when the user taps on the MultiGestureCanvas/Lightbox.
-     */
-    const handleTap = useCallback(() => {
-        if (!isScrollEnabled.value) {
-            return;
-        }
-
-        onRequestToggleArrows();
-    }, [isScrollEnabled.value, onRequestToggleArrows]);
-
     const extractItemKey = useCallback(
         (item: Attachment, index: number) =>
             typeof item.source === 'string' || typeof item.source === 'number' ? `source-${item.source}` : `reportActionID-${item.reportActionID}` ?? `index-${index}`,

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

@@ -96,22 +96,6 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
         [autoHideArrows, page, updatePage],
     );
 
-    /**
-     * Toggles the arrows visibility
-     * @param {Boolean} showArrows if showArrows is passed, it will set the visibility to the passed value
-     */
-    const toggleArrows = useCallback(
-        (showArrows?: boolean) => {
-            if (showArrows === undefined) {
-                setShouldShowArrows((prevShouldShowArrows) => !prevShouldShowArrows);
-                return;
-            }
-
-            setShouldShowArrows(showArrows);
-        },
-        [setShouldShowArrows],
-    );
-
     const containerStyles = [styles.flex1, styles.attachmentCarouselContainer];
 
     if (page == null) {
@@ -147,7 +131,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                         items={attachments}
                         initialPage={page}
                         activeSource={activeSource}
-                        onRequestToggleArrows={toggleArrows}
+                        setShouldShowArrows={setShouldShowArrows}
                         onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
                         onClose={onClose}
                         ref={pagerRef}

src/components/Attachments/AttachmentCarousel/index.tsx

@@ -1,10 +1,12 @@
 import isEqual from 'lodash/isEqual';
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import type {MutableRefObject} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {ListRenderItemInfo} from 'react-native';
 import {Keyboard, PixelRatio, View} from 'react-native';
+import type {GestureType} from 'react-native-gesture-handler';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import {withOnyx} from 'react-native-onyx';
-import Animated, {scrollTo, useAnimatedRef} from 'react-native-reanimated';
+import Animated, {scrollTo, useAnimatedRef, useSharedValue} from 'react-native-reanimated';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -22,8 +24,10 @@ import CarouselActions from './CarouselActions';
 import CarouselButtons from './CarouselButtons';
 import CarouselItem from './CarouselItem';
 import extractAttachments from './extractAttachments';
+import AttachmentCarouselPagerContext from './Pager/AttachmentCarouselPagerContext';
 import type {AttachmentCaraouselOnyxProps, AttachmentCarouselProps, UpdatePageProps} from './types';
 import useCarouselArrows from './useCarouselArrows';
+import useCarouselContextEvents from './useCarouselContextEvents';
 
 const viewabilityConfig = {
     // To facilitate paging through the attachments, we want to consider an item "viewable" when it is
@@ -33,13 +37,15 @@ const viewabilityConfig = {
 
 const MIN_FLING_VELOCITY = 500;
 
-function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, type, accountID}: AttachmentCarouselProps) {
+function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, type, accountID, onClose}: AttachmentCarouselProps) {
     const theme = useTheme();
     const {translate} = useLocalize();
     const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
     const styles = useThemeStyles();
     const {isFullScreenRef} = useFullScreenContext();
     const scrollRef = useAnimatedRef<Animated.FlatList<ListRenderItemInfo<Attachment>>>();
+    const nope = useSharedValue(false);
+    const pagerRef = useRef<GestureType>(null);
 
     const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 
@@ -52,6 +58,14 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     const [attachments, setAttachments] = useState<Attachment[]>([]);
     const [activeSource, setActiveSource] = useState<AttachmentSource | null>(source);
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
+    const {handleTap, handleScaleChange, scale} = useCarouselContextEvents(setShouldShowArrows);
+
+    useEffect(() => {
+        if (!canUseTouchScreen) {
+            return;
+        }
+        setShouldShowArrows(true);
+    }, [canUseTouchScreen, page, setShouldShowArrows]);
 
     const compareImage = useCallback((attachment: Attachment) => attachment.source === source, [source]);
 
@@ -169,27 +183,51 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
         [cellWidth],
     );
 
+    const context = useMemo(
+        () => ({
+            pagerItems: [{source, index: 0, isActive: true}],
+            activePage: 0,
+            pagerRef,
+            isPagerScrolling: nope,
+            isScrollEnabled: nope,
+            onTap: handleTap,
+            onScaleChanged: handleScaleChange,
+            onSwipeDown: onClose,
+        }),
+        [source, nope, handleTap, handleScaleChange, onClose],
+    );
+
     /** Defines how a single attachment should be rendered */
     const renderItem = useCallback(
         ({item}: ListRenderItemInfo<Attachment>) => (
             <View style={[styles.h100, {width: cellWidth}]}>
                 <CarouselItem
                     item={item}
                     isFocused={activeSource === item.source}
-                    onPress={canUseTouchScreen ? () => setShouldShowArrows((oldState) => !oldState) : undefined}
+                    onPress={canUseTouchScreen ? handleTap : undefined}
                     isModalHovered={shouldShowArrows}
                 />
             </View>
         ),
-        [activeSource, canUseTouchScreen, cellWidth, setShouldShowArrows, shouldShowArrows, styles.h100],
+        [activeSource, canUseTouchScreen, cellWidth, handleTap, shouldShowArrows, styles.h100],
     );
     /** Pan gesture handing swiping through attachments on touch screen devices */
     const pan = useMemo(
         () =>
             Gesture.Pan()
                 .enabled(canUseTouchScreen)
-                .onUpdate(({translationX}) => scrollTo(scrollRef, page * cellWidth - translationX, 0, false))
+                .onUpdate(({translationX}) => {
+                    if (scale.current !== 1) {
+                        return;
+                    }
+
+                    scrollTo(scrollRef, page * cellWidth - translationX, 0, false);
+                })
                 .onEnd(({translationX, velocityX}) => {
+                    if (scale.current !== 1) {
+                        return;
+                    }
+
                     let newIndex;
                     if (velocityX > MIN_FLING_VELOCITY) {
                         // User flung to the right
@@ -204,8 +242,9 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                     }
 
                     scrollTo(scrollRef, newIndex * cellWidth, 0, true);
-                }),
-        [attachments.length, canUseTouchScreen, cellWidth, page, scrollRef],
+                })
+                .withRef(pagerRef as MutableRefObject<GestureType | undefined>),
+        [attachments.length, canUseTouchScreen, cellWidth, page, scale, scrollRef],
     );
 
     return (
@@ -233,27 +272,28 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                         autoHideArrow={autoHideArrows}
                         cancelAutoHideArrow={cancelAutoHideArrows}
                     />
-
-                    <GestureDetector gesture={pan}>
-                        <Animated.FlatList
-                            keyboardShouldPersistTaps="handled"
-                            horizontal
-                            showsHorizontalScrollIndicator={false}
-                            // scrolling is controlled by the pan gesture
-                            scrollEnabled={false}
-                            ref={scrollRef}
-                            initialScrollIndex={page}
-                            initialNumToRender={3}
-                            windowSize={5}
-                            maxToRenderPerBatch={CONST.MAX_TO_RENDER_PER_BATCH.CAROUSEL}
-                            data={attachments}
-                            renderItem={renderItem}
-                            getItemLayout={getItemLayout}
-                            keyExtractor={extractItemKey}
-                            viewabilityConfig={viewabilityConfig}
-                            onViewableItemsChanged={updatePage}
-                        />
-                    </GestureDetector>
+                    <AttachmentCarouselPagerContext.Provider value={context}>
+                        <GestureDetector gesture={pan}>
+                            <Animated.FlatList
+                                keyboardShouldPersistTaps="handled"
+                                horizontal
+                                showsHorizontalScrollIndicator={false}
+                                // scrolling is controlled by the pan gesture
+                                scrollEnabled={false}
+                                ref={scrollRef}
+                                initialScrollIndex={page}
+                                initialNumToRender={3}
+                                windowSize={5}
+                                maxToRenderPerBatch={CONST.MAX_TO_RENDER_PER_BATCH.CAROUSEL}
+                                data={attachments}
+                                renderItem={renderItem}
+                                getItemLayout={getItemLayout}
+                                keyExtractor={extractItemKey}
+                                viewabilityConfig={viewabilityConfig}
+                                onViewableItemsChanged={updatePage}
+                            />
+                        </GestureDetector>
+                    </AttachmentCarouselPagerContext.Provider>
 
                     <CarouselActions onCycleThroughAttachments={cycleThroughAttachments} />
                 </>

src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts

@@ -32,6 +32,9 @@ function useCarouselArrows() {
         }, CONST.ARROW_HIDE_DELAY);
     }, [canUseTouchScreen, cancelAutoHideArrows]);
 
+    /**
+     * Sets the visibility of the arrows.
+     */
     const setShouldShowArrows = useCallback(
         (show: SetStateAction<boolean> = true) => {
             setShouldShowArrowsInternal(show);