Merge pull request #30050 from HezekielT/fix--Android-pdf-scrolling-issue

Fix: android pdf scrolling issue

Author: Gonals

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

@@ -3,7 +3,18 @@ import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCa
 import PDFView from '@components/PDFView';
 import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
 
-function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarousel, onPress, onScaleChanged: onScaleChangedProp, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) {
+function BaseAttachmentViewPdf({
+    file,
+    encryptedSourceUrl,
+    isFocused,
+    isUsedInCarousel,
+    onPress,
+    onScaleChanged: onScaleChangedProp,
+    onToggleKeyboard,
+    onLoadComplete,
+    errorLabelStyles,
+    style,
+}) {
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
 
     useEffect(() => {
@@ -16,7 +27,7 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarouse
 
     const onScaleChanged = useCallback(
         (scale) => {
-            onScaleChangedProp();
+            onScaleChangedProp(scale);
 
             // When a pdf is shown in a carousel, we want to disable the pager scroll when the pdf is zoomed in
             if (isUsedInCarousel) {
@@ -49,7 +60,8 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarouse
     );
 }
 
-AttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
-AttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
+BaseAttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
+BaseAttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
+BaseAttachmentViewPdf.displayName = 'BaseAttachmentViewPdf';
 
-export default memo(AttachmentViewPdf);
+export default memo(BaseAttachmentViewPdf);

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

@@ -0,0 +1,68 @@
+import React, {memo, useCallback, useContext} from 'react';
+import {StyleSheet, View} 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 {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
+
+function AttachmentViewPdf(props) {
+    const {onScaleChanged, ...restProps} = 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
+                        {...restProps}
+                        onScaleChanged={(scale) => {
+                            updateScale(scale);
+                            onScaleChanged();
+                        }}
+                    />
+                </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 {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} 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);