diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js index a817195fe8a3..1748a745f8c8 100644 --- 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'; @@ -130,6 +130,13 @@ function ReceiptSelector(props) { IOU.navigateToNextPage(iou, iouType, reportID, report, props.route.path); }; + const panResponder = useRef( + PanResponder.create({ + onMoveShouldSetPanResponder: () => true, + onPanResponderTerminationRequest: () => false, + }), + ).current; + return ( {!isDraggingOver ? ( @@ -144,15 +151,21 @@ function ReceiptSelector(props) { height={CONST.RECEIPT.ICON_SIZE} /> - {translate('receipt.upload')} - - {isSmallScreenWidth ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')} - - {isSmallScreenWidth ? null : translate('receipt.dragReceiptAfterEmail')} - + + {translate('receipt.upload')} + + {isSmallScreenWidth ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')} + + {isSmallScreenWidth ? null : translate('receipt.dragReceiptAfterEmail')} + + {({openPicker}) => ( ({ marginRight: 20, justifyContent: 'center', alignItems: 'center', - padding: 40, + paddingVertical: 40, gap: 4, flex: 1, }), + receiptViewTextContainer: { + paddingHorizontal: 40, + ...sizing.w100, + }, + cameraView: { flex: 1, overflow: 'hidden',