Merge pull request #28135 from akinwale/task-27551

fix: prevent tab swipe glitches when attempting to select text on the Scan tab
Expensify · Sep 27, 2023 · 3c4e324 · 3c4e324
2 parents d511065 + a35872e
commit 3c4e324
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js
@@ -1,5 +1,5 @@
-import {View, Text, PixelRatio} from 'react-native';
-import React, {useContext, useState} from 'react';
+import {View, Text, PanResponder, PixelRatio} from 'react-native';
+import React, {useContext, useRef, useState} from 'react';
 import lodashGet from 'lodash/get';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
@@ -129,6 +129,13 @@ function ReceiptSelector(props) {
         IOU.navigateToNextPage(iou, iouType, reportID, report, props.route.path);
     };
 
+    const panResponder = useRef(
+        PanResponder.create({
+            onMoveShouldSetPanResponder: () => true,
+            onPanResponderTerminationRequest: () => false,
+        }),
+    ).current;
+
     return (
         <View style={[styles.uploadReceiptView(isSmallScreenWidth)]}>
             {!isDraggingOver ? (
@@ -143,15 +150,21 @@ function ReceiptSelector(props) {
                             height={CONST.RECEIPT.ICON_SIZE}
                         />
                     </View>
-                    <Text style={[styles.textReceiptUpload]}>{translate('receipt.upload')}</Text>
-                    <Text style={[styles.subTextReceiptUpload]}>
-                        {isSmallScreenWidth ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')}
-                        <CopyTextToClipboard
-                            text={CONST.EMAIL.RECEIPTS}
-                            textStyles={[styles.textBlue]}
-                        />
-                        {isSmallScreenWidth ? null : translate('receipt.dragReceiptAfterEmail')}
-                    </Text>
+                    <View
+                        style={styles.receiptViewTextContainer}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...panResponder.panHandlers}
+                    >
+                        <Text style={[styles.textReceiptUpload]}>{translate('receipt.upload')}</Text>
+                        <Text style={[styles.subTextReceiptUpload]}>
+                            {isSmallScreenWidth ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')}
+                            <CopyTextToClipboard
+                                text={CONST.EMAIL.RECEIPTS}
+                                textStyles={[styles.textBlue]}
+                            />
+                            {isSmallScreenWidth ? null : translate('receipt.dragReceiptAfterEmail')}
+                        </Text>
+                    </View>
                     <AttachmentPicker>
                         {({openPicker}) => (
                             <Button

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -767,11 +767,16 @@ const styles = (theme) => ({
         marginRight: 20,
         justifyContent: 'center',
         alignItems: 'center',
-        padding: 40,
+        paddingVertical: 40,
         gap: 4,
         flex: 1,
     }),
 
+    receiptViewTextContainer: {
+        paddingHorizontal: 40,
+        ...sizing.w100,
+    },
+
     cameraView: {
         flex: 1,
         overflow: 'hidden',