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} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -56,12 +56,14 @@ class AttachmentCarousel extends React.Component {
         this.renderItem = this.renderItem.bind(this);
         this.renderCell = this.renderCell.bind(this);
         this.updatePage = this.updatePage.bind(this);
+        this.toggleZoomed = this.toggleZoomed.bind(this);
 
         this.state = {
             attachments: [],
             source: this.props.source,
             shouldShowArrow: this.canUseTouchScreen,
             containerWidth: 0,
+            isZoomed: false,
         };
     }
 
@@ -116,6 +118,17 @@ class AttachmentCarousel extends React.Component {
         this.setState({shouldShowArrow});
     }
 
+    /**
+     * Toggles zoomed state to enable panning the PDF
+     * @param {Number} scale current PDF scale
+     */
+    toggleZoomed(scale) {
+        if ((scale <= 1 && !this.state.isZoomed) || (scale > 1 && this.state.isZoomed)) {
+            return;
+        }
+        this.setState(current => ({isZoomed: !current.isZoomed}));
+    }
+
     /**
      * Map report actions to attachment items
      */
@@ -198,21 +211,8 @@ class AttachmentCarousel extends React.Component {
     renderCell(props) {
         const style = [props.style, styles.h100, {width: this.state.containerWidth}];
 
-        // Touch screen devices can toggle between showing and hiding the arrows by tapping on the image/container
-        // Other devices toggle the arrows through hovering (mouse) instead (see render() root element)
-        if (!this.canUseTouchScreen) {
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            return <View {...props} style={style} />;
-        }
-
-        return (
-            <Pressable
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-                onPress={() => this.setState(current => ({shouldShowArrow: !current.shouldShowArrow}))}
-                style={style}
-            />
-        );
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        return <View {...props} style={style} />;
     }
 
     /**
@@ -222,7 +222,18 @@ 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.toggleZoomed}
+                onPress={() => this.setState(current => ({shouldShowArrow: !current.shouldShowArrow}))}
+            />
+        );
     }
 
     render() {
@@ -292,7 +303,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}
+                        // disable scroll in PDF zoomed state
+                        scrollEnabled={this.canUseTouchScreen && !this.state.isZoomed}
                         ref={this.scrollRef}
                         initialScrollIndex={this.state.page}
                         initialNumToRender={3}

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';
@@ -152,7 +152,7 @@ class PDFView extends Component {
                     </View>
                 )}
                 {this.state.shouldAttemptPDFLoad && (
-                    <TouchableWithoutFeedback style={touchableStyles}>
+                    <View style={touchableStyles}>
                         <PDF
                             trustAllCerts={false}
                             renderActivityIndicator={() => <FullScreenLoadingIndicator />}
@@ -162,8 +162,9 @@ class PDFView extends Component {
                             password={this.state.password}
                             onLoadComplete={this.finishPDFLoad}
                             onPageSingleTap={this.props.onPress}
+                            onScaleChanged={this.props.onScaleChanged}
                         />
-                    </TouchableWithoutFeedback>
+                    </View>
                 )}
                 {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};