Fix zoom and slide on native for PDFView

src/components/AttachmentCarousel/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, FlatList, Pressable} from 'react-native';
+import {View, FlatList, PanResponder} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -56,13 +56,25 @@ class AttachmentCarousel extends React.Component {
         this.renderItem = this.renderItem.bind(this);
         this.renderCell = this.renderCell.bind(this);
         this.updatePage = this.updatePage.bind(this);
+        this.updateZoomState = this.updateZoomState.bind(this);
+        this.toggleArrowsDebounced = _.debounce(this.toggleArrowsDebounced.bind(this), 300);
 
         this.state = {
             attachments: [],
             source: this.props.source,
             shouldShowArrow: this.canUseTouchScreen,
             containerWidth: 0,
+            isZoomed: false,
         };
+
+        this.panResponder = PanResponder.create({
+            onStartShouldSetPanResponder: (event, gestureState) => {
+                if (gestureState.numberActiveTouches > 1 || this.state.isZoomed) {
+                    return false;
+                }
+                this.toggleArrowsDebounced();
+            },
+        });
     }
 
     componentDidMount() {
@@ -116,6 +128,29 @@ class AttachmentCarousel extends React.Component {
         this.setState({shouldShowArrow});
     }
 
+    /**
+     * Toggles the visibility of the arrows (debounced)
+     */
+    toggleArrowsDebounced() {
+        // Don't toggle arrows in a zoomed state
+        if (this.state.isZoomed) {
+            return;
+        }
+        this.setState(current => ({shouldShowArrow: !current.shouldShowArrow}));
+    }
+
+    /**
+     * Updates zoomed state to enable/disable panning the PDF
+     * @param {Number} scale current PDF scale
+     */
+    updateZoomState(scale) {
+        const isZoomed = scale > 1;
+        if (isZoomed === this.state.isZoomed) {
+            return;
+        }
+        this.setState({isZoomed});
+    }
+
     /**
      * Map report actions to attachment items
      */
@@ -184,10 +219,11 @@ class AttachmentCarousel extends React.Component {
             return;
         }
 
+        const isZoomed = false;
         const page = entry.index;
         const {source, file} = this.getAttachment(entry.item);
         this.props.onNavigate({source: addEncryptedAuthTokenToURL(source), file});
-        this.setState({page, source});
+        this.setState({page, source, isZoomed});
     }
 
     /**
@@ -206,10 +242,11 @@ class AttachmentCarousel extends React.Component {
         }
 
         return (
-            <Pressable
+            <View
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
-                onPress={() => this.setState(current => ({shouldShowArrow: !current.shouldShowArrow}))}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.panResponder.panHandlers}
                 style={style}
             />
         );
@@ -222,7 +259,17 @@ class AttachmentCarousel extends React.Component {
      */
     renderItem({item}) {
         const authSource = addEncryptedAuthTokenToURL(item.source);
-        return <AttachmentView source={authSource} file={item.file} />;
+        if (!this.canUseTouchScreen) {
+            return <AttachmentView source={authSource} file={item.file} />;
+        }
+
+        return (
+            <AttachmentView
+                source={authSource}
+                file={item.file}
+                onScaleChanged={this.updateZoomState}
+            />
+        );
     }
 
     render() {
@@ -292,7 +339,8 @@ class AttachmentCarousel extends React.Component {
 
                         // Enable scrolling by swiping on mobile (touch) devices only
                         // disable scroll for desktop/browsers because they add their scrollbars
-                        scrollEnabled={this.canUseTouchScreen}
+                        // Enable scrolling FlatList only when PDF is not in a zoomed state
+                        scrollEnabled={this.canUseTouchScreen && !this.state.isZoomed}
                         ref={this.scrollRef}
                         initialScrollIndex={this.state.page}
                         initialNumToRender={3}
@@ -305,6 +353,7 @@ class AttachmentCarousel extends React.Component {
                         keyExtractor={item => item.source}
                         viewabilityConfig={this.viewabilityConfig}
                         onViewableItemsChanged={this.updatePage}
+                        onScrollBeginDrag={this.toggleArrowsDebounced.cancel}
                     />
                 )}
 

src/components/AttachmentView.js

@@ -37,6 +37,9 @@ const propTypes = {
     /** Function for handle on press */
     onPress: PropTypes.func,
 
+    /** Handles scale changed event in PDF component */
+    onScaleChanged: PropTypes.func,
+
     /** Notify parent that the UI should be modified to accommodate keyboard */
     onToggleKeyboard: PropTypes.func,
 
@@ -51,6 +54,7 @@ const defaultProps = {
     shouldShowDownloadIcon: false,
     shouldShowLoadingSpinnerIcon: false,
     onPress: () => {},
+    onScaleChanged: () => {},
     onToggleKeyboard: () => {},
 };
 
@@ -75,6 +79,7 @@ const AttachmentView = (props) => {
                 sourceURL={sourceURL}
                 style={styles.imageModalPDF}
                 onToggleKeyboard={props.onToggleKeyboard}
+                onScaleChanged={props.onScaleChanged}
             />
         );
     }

src/components/PDFView/index.native.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {TouchableWithoutFeedback, View} from 'react-native';
+import {View} from 'react-native';
 import PDF from 'react-native-pdf';
 import KeyboardAvoidingView from '../KeyboardAvoidingView';
 import styles from '../../styles/styles';
@@ -124,11 +124,6 @@ class PDFView extends Component {
             styles.imageModalPDF,
             StyleUtils.getWidthAndHeightStyle(this.props.windowWidth, this.props.windowHeight),
         ];
-        const touchableStyles = [
-            styles.flex1,
-            this.props.style,
-            styles.w100,
-        ];
 
         // If we haven't yet successfully validated the password and loaded the PDF,
         // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm
@@ -152,18 +147,17 @@ class PDFView extends Component {
                     </View>
                 )}
                 {this.state.shouldAttemptPDFLoad && (
-                    <TouchableWithoutFeedback style={touchableStyles}>
-                        <PDF
-                            trustAllCerts={false}
-                            renderActivityIndicator={() => <FullScreenLoadingIndicator />}
-                            source={{uri: this.props.sourceURL}}
-                            style={pdfStyles}
-                            onError={this.handleFailureToLoadPDF}
-                            password={this.state.password}
-                            onLoadComplete={this.finishPDFLoad}
-                            onPageSingleTap={this.props.onPress}
-                        />
-                    </TouchableWithoutFeedback>
+                    <PDF
+                        trustAllCerts={false}
+                        renderActivityIndicator={() => <FullScreenLoadingIndicator />}
+                        source={{uri: this.props.sourceURL}}
+                        style={pdfStyles}
+                        onError={this.handleFailureToLoadPDF}
+                        password={this.state.password}
+                        onLoadComplete={this.finishPDFLoad}
+                        onPageSingleTap={this.props.onPress}
+                        onScaleChanged={this.props.onScaleChanged}
+                    />
                 )}
                 {this.state.shouldRequestPassword && (
                     <KeyboardAvoidingView style={styles.flex1}>

src/components/PDFView/pdfViewPropTypes.js

@@ -15,6 +15,9 @@ const propTypes = {
     /** Handles press events like toggling attachment arrows natively */
     onPress: PropTypes.func,
 
+    /** Handles scale changed event in PDF component */
+    onScaleChanged: PropTypes.func,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -23,6 +26,7 @@ const defaultProps = {
     style: {},
     onPress: () => {},
     onToggleKeyboard: () => {},
+    onScaleChanged: () => {},
 };
 
 export {propTypes, defaultProps};