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,15 @@ 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.toggleArrowsVisibility = this.toggleArrowsVisibility.bind(this);
 
         this.state = {
             attachments: [],
             source: this.props.source,
             shouldShowArrow: this.canUseTouchScreen,
             containerWidth: 0,
+            isZoomed: false,
         };
     }
 
@@ -113,7 +116,30 @@ class AttachmentCarousel extends React.Component {
      * @param {Boolean} shouldShowArrow
      */
     toggleArrowsVisibility(shouldShowArrow) {
-        this.setState({shouldShowArrow});
+        // Don't toggle arrows in a zoomed state
+        if (this.state.isZoomed) {
+            return;
+        }
+        if (_.isBoolean(shouldShowArrow)) {
+            this.setState({shouldShowArrow});
+            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;
+        }
+        if (isZoomed) {
+            this.toggleArrowsVisibility(false);
+        }
+        this.setState({isZoomed});
     }
 
     /**
@@ -187,7 +213,7 @@ class AttachmentCarousel extends React.Component {
         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: false});
     }
 
     /**
@@ -198,21 +224,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 +235,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.updateZoomState}
+                onPress={this.toggleArrowsVisibility}
+            />
+        );
     }
 
     render() {
@@ -292,7 +316,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}

src/components/AttachmentView.js

@@ -1,5 +1,5 @@
-import React, {memo} from 'react';
-import {View, ActivityIndicator} from 'react-native';
+import React, {memo, useState} from 'react';
+import {View, ActivityIndicator, Pressable} from 'react-native';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
@@ -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,
 
@@ -50,11 +53,15 @@ const defaultProps = {
     },
     shouldShowDownloadIcon: false,
     shouldShowLoadingSpinnerIcon: false,
-    onPress: () => {},
+    onPress: undefined,
+    onScaleChanged: () => {},
     onToggleKeyboard: () => {},
 };
 
 const AttachmentView = (props) => {
+    const [loadComplete, setLoadComplete] = useState(false);
+    const containerStyles = [styles.flex1, styles.flexRow, styles.alignSelfStretch];
+
     // Handles case where source is a component (ex: SVG)
     if (_.isFunction(props.source)) {
         return (
@@ -69,21 +76,35 @@ const AttachmentView = (props) => {
         const sourceURL = props.isAuthTokenRequired
             ? addEncryptedAuthTokenToURL(props.source)
             : props.source;
-        return (
+        const children = (
             <PDFView
                 onPress={props.onPress}
                 sourceURL={sourceURL}
                 style={styles.imageModalPDF}
                 onToggleKeyboard={props.onToggleKeyboard}
+                onScaleChanged={props.onScaleChanged}
+                onLoadComplete={() => !loadComplete && setLoadComplete(true)}
             />
         );
+        return (
+            props.onPress ? (
+                <Pressable onPress={props.onPress} disabled={loadComplete} style={containerStyles}>
+                    {children}
+                </Pressable>
+            ) : children
+        );
     }
 
     // For this check we use both source and file.name since temporary file source is a blob
     // both PDFs and images will appear as images when pasted into the the text field
     if (Str.isImage(props.source) || (props.file && Str.isImage(props.file.name))) {
+        const children = <ImageView url={props.source} isAuthTokenRequired={props.isAuthTokenRequired} />;
         return (
-            <ImageView onPress={props.onPress} url={props.source} isAuthTokenRequired={props.isAuthTokenRequired} />
+            props.onPress ? (
+                <Pressable onPress={props.onPress} disabled={loadComplete} style={containerStyles}>
+                    {children}
+                </Pressable>
+            ) : children
         );
     }
 

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';
@@ -117,18 +117,14 @@ class PDFView extends Component {
             shouldRequestPassword: false,
             shouldShowLoadingIndicator: false,
         });
+        this.props.onLoadComplete();
     }
 
     render() {
         const pdfStyles = [
             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 +148,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,12 @@ const propTypes = {
     /** Handles press events like toggling attachment arrows natively */
     onPress: PropTypes.func,
 
+    /** Handles scale changed event in PDF component */
+    onScaleChanged: PropTypes.func,
+
+    /** Handles load complete event in PDF component */
+    onLoadComplete: PropTypes.func,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -23,6 +29,8 @@ const defaultProps = {
     style: {},
     onPress: () => {},
     onToggleKeyboard: () => {},
+    onScaleChanged: () => {},
+    onLoadComplete: () => {},
 };
 
 export {propTypes, defaultProps};