diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 17568c745d47..21eb7ce1a6dc 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -1,5 +1,5 @@
import React from 'react';
-import {View, FlatList, PanResponder} from 'react-native';
+import {View, FlatList, Pressable} from 'react-native';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
@@ -58,7 +58,7 @@ class AttachmentCarousel extends React.Component {
this.updatePage = this.updatePage.bind(this);
this.updateZoomState = this.updateZoomState.bind(this);
- // Debounce arrow toggle to prevent multiply action on double-click and prevent toggle on swipe
+ // Debounce arrow toggle to prevent multiply action on double-click
this.toggleArrowsDebounced = _.debounce(this.toggleArrowsDebounced.bind(this), 300);
this.state = {
@@ -68,15 +68,6 @@ class AttachmentCarousel extends React.Component {
containerWidth: 0,
isZoomed: false,
};
-
- this.panResponder = PanResponder.create({
- onStartShouldSetPanResponder: (event, gestureState) => {
- if (gestureState.numberActiveTouches > 1 || this.state.isZoomed) {
- return false;
- }
- this.toggleArrowsDebounced();
- },
- });
}
componentDidMount() {
@@ -238,22 +229,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 ;
- }
-
- return (
-
- );
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return ;
}
/**
@@ -272,6 +249,7 @@ class AttachmentCarousel extends React.Component {
source={authSource}
file={item.file}
onScaleChanged={this.updateZoomState}
+ onPress={this.toggleArrowsDebounced}
/>
);
}
@@ -357,9 +335,6 @@ class AttachmentCarousel extends React.Component {
keyExtractor={item => item.source}
viewabilityConfig={this.viewabilityConfig}
onViewableItemsChanged={this.updatePage}
-
- // Cancel pending arrow toggle action on swipe gesture
- onScroll={this.toggleArrowsDebounced.cancel}
/>
)}
diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index 64975a89d288..a4dee1320e83 100755
--- a/src/components/AttachmentView.js
+++ b/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';
@@ -59,10 +59,17 @@ const defaultProps = {
};
const AttachmentView = (props) => {
+ const [loadComplete, setLoadComplete] = useState(false);
+ const containerStyles = props.isSmallScreenWidth
+ ? [styles.w100, styles.flex1]
+ : [styles.alignItemsCenter, styles.flex1];
+
// Handles case where source is a component (ex: SVG)
if (_.isFunction(props.source)) {
return (
-
+
+
+
);
}
@@ -74,13 +81,16 @@ const AttachmentView = (props) => {
? addEncryptedAuthTokenToURL(props.source)
: props.source;
return (
-
+
+ !loadComplete && setLoadComplete(true)}
+ />
+
);
}
@@ -88,7 +98,9 @@ const AttachmentView = (props) => {
// 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))) {
return (
-
+
+
+
);
}
@@ -96,28 +108,30 @@ const AttachmentView = (props) => {
-
-
-
-
- {props.file && props.file.name}
- {!props.shouldShowLoadingSpinnerIcon && props.shouldShowDownloadIcon && (
-
-
-
-
-
- )}
- {props.shouldShowLoadingSpinnerIcon && (
-
-
-
-
+
+
+
- )}
+
+ {props.file && props.file.name}
+ {!props.shouldShowLoadingSpinnerIcon && props.shouldShowDownloadIcon && (
+
+
+
+
+
+ )}
+ {props.shouldShowLoadingSpinnerIcon && (
+
+
+
+
+
+ )}
+
);
};
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index c3c15676b052..e6f19c02698e 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -1,6 +1,7 @@
import React, {Component} from 'react';
import {View} from 'react-native';
import PDF from 'react-native-pdf';
+import _ from 'underscore';
import KeyboardAvoidingView from '../KeyboardAvoidingView';
import styles from '../../styles/styles';
import * as StyleUtils from '../../styles/StyleUtils';
@@ -117,6 +118,7 @@ class PDFView extends Component {
shouldRequestPassword: false,
shouldShowLoadingIndicator: false,
});
+ this.props.onLoadComplete();
}
render() {
diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
index 87a5986a2ccd..f87cee3a11b6 100644
--- a/src/components/PDFView/pdfViewPropTypes.js
+++ b/src/components/PDFView/pdfViewPropTypes.js
@@ -18,6 +18,9 @@ const propTypes = {
/** Handles scale changed event in PDF component */
onScaleChanged: PropTypes.func,
+ /** Handles load complete event in PDF component */
+ onLoadComplete: PropTypes.func,
+
...windowDimensionsPropTypes,
};
@@ -27,6 +30,7 @@ const defaultProps = {
onPress: () => {},
onToggleKeyboard: () => {},
onScaleChanged: () => {},
+ onLoadComplete: () => {},
};
export {propTypes, defaultProps};