Fix: android pdf scrolling issue

src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js → src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js

@@ -1,9 +1,34 @@
 import React, {memo, useCallback, useContext, useEffect} from 'react';
+import PropTypes from 'prop-types';
 import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
 import PDFView from '@components/PDFView';
 import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
 
-function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarousel, onPress, onScaleChanged: onScaleChangedProp, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) {
+const propTypes = {
+    /** Updates the scale value of the pdf */
+    updateScale: PropTypes.func,
+
+    ...attachmentViewPdfPropTypes,
+};
+
+const defaultProps = {
+    updateScale: () => {},
+    ...attachmentViewPdfDefaultProps,
+};
+
+function BaseAttachmentViewPdf({
+    file,
+    encryptedSourceUrl,
+    isFocused,
+    isUsedInCarousel,
+    onPress,
+    onScaleChanged: onScaleChangedProp,
+    onToggleKeyboard,
+    onLoadComplete,
+    errorLabelStyles,
+    style,
+    updateScale,
+}) {
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
 
     useEffect(() => {
@@ -16,6 +41,7 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarouse
 
     const onScaleChanged = useCallback(
         (scale) => {
+            updateScale(scale);
             onScaleChangedProp();
 
             // When a pdf is shown in a carousel, we want to disable the pager scroll when the pdf is zoomed in
@@ -31,7 +57,7 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarouse
                 attachmentCarouselPagerContext.shouldPagerScroll.value = shouldPagerScroll;
             }
         },
-        [attachmentCarouselPagerContext, isUsedInCarousel, onScaleChangedProp],
+        [attachmentCarouselPagerContext, isUsedInCarousel, onScaleChangedProp, updateScale],
     );
 
     return (
@@ -49,7 +75,8 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarouse
     );
 }
 
-AttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
-AttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
+BaseAttachmentViewPdf.propTypes = propTypes;
+BaseAttachmentViewPdf.defaultProps = defaultProps;
+BaseAttachmentViewPdf.displayName = 'BaseAttachmentViewPdf';
 
-export default memo(AttachmentViewPdf);
+export default memo(BaseAttachmentViewPdf);

src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js

@@ -0,0 +1,64 @@
+import React, {memo, useCallback, useContext} from 'react';
+import {View, StyleSheet} from 'react-native';
+import {Gesture, GestureDetector} from 'react-native-gesture-handler';
+import Animated, {useSharedValue} from 'react-native-reanimated';
+import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
+import styles from '@styles/styles';
+import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
+import {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps} from './propTypes';
+
+function AttachmentViewPdf(props) {
+    const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
+    const scaleRef = useSharedValue(1);
+    const offsetX = useSharedValue(0);
+    const offsetY = useSharedValue(0);
+
+    const Pan = Gesture.Pan()
+        .manualActivation(true)
+        .onTouchesMove((evt) => {
+            if (offsetX.value !== 0 && offsetY.value !== 0) {
+                // if the value of X is greater than Y and the pdf is not zoomed in,
+                // enable  the pager scroll so that the user
+                // can swipe to the next attachment otherwise disable it.
+                if (Math.abs(evt.allTouches[0].absoluteX - offsetX.value) > Math.abs(evt.allTouches[0].absoluteY - offsetY.value) && scaleRef.value === 1) {
+                    attachmentCarouselPagerContext.shouldPagerScroll.value = true;
+                } else {
+                    attachmentCarouselPagerContext.shouldPagerScroll.value = false;
+                }
+            }
+            offsetX.value = evt.allTouches[0].absoluteX;
+            offsetY.value = evt.allTouches[0].absoluteY;
+        });
+
+    const updateScale = useCallback(
+        (scale) => {
+            scaleRef.value = scale;
+        },
+        [scaleRef],
+    );
+
+    return (
+        <View
+            collapsable={false}
+            style={[styles.flex1]}
+        >
+            <GestureDetector gesture={Pan}>
+                <Animated.View
+                    collapsable={false}
+                    style={[StyleSheet.absoluteFill, styles.justifyContentCenter, styles.alignItemsCenter]}
+                >
+                    <BaseAttachmentViewPdf
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...props}
+                        updateScale={updateScale}
+                    />
+                </Animated.View>
+            </GestureDetector>
+        </View>
+    );
+}
+
+AttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
+AttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
+
+export default memo(AttachmentViewPdf);

src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.js

@@ -0,0 +1,17 @@
+import React, {memo} from 'react';
+import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
+import {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps} from './propTypes';
+
+function AttachmentViewPdf(props) {
+    return (
+        <BaseAttachmentViewPdf
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        />
+    );
+}
+
+AttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
+AttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
+
+export default memo(AttachmentViewPdf);