diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js
similarity index 78%
rename from src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js
rename to src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js
index 9ab0b45f8c8f..40887ddee697 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js
@@ -3,7 +3,18 @@ import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCa
import PDFView from '@components/PDFView';
import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
-function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarousel, onPress, onScaleChanged: onScaleChangedProp, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) {
+function BaseAttachmentViewPdf({
+ file,
+ encryptedSourceUrl,
+ isFocused,
+ isUsedInCarousel,
+ onPress,
+ onScaleChanged: onScaleChangedProp,
+ onToggleKeyboard,
+ onLoadComplete,
+ errorLabelStyles,
+ style,
+}) {
const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
useEffect(() => {
@@ -16,7 +27,7 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarouse
const onScaleChanged = useCallback(
(scale) => {
- onScaleChangedProp();
+ onScaleChangedProp(scale);
// When a pdf is shown in a carousel, we want to disable the pager scroll when the pdf is zoomed in
if (isUsedInCarousel) {
@@ -49,7 +60,8 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarouse
);
}
-AttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
-AttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
+BaseAttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
+BaseAttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
+BaseAttachmentViewPdf.displayName = 'BaseAttachmentViewPdf';
-export default memo(AttachmentViewPdf);
+export default memo(BaseAttachmentViewPdf);
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
new file mode 100644
index 000000000000..46afd23daa4c
--- /dev/null
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
@@ -0,0 +1,68 @@
+import React, {memo, useCallback, useContext} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {Gesture, GestureDetector} from 'react-native-gesture-handler';
+import Animated, {useSharedValue} from 'react-native-reanimated';
+import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
+import styles from '@styles/styles';
+import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
+import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
+
+function AttachmentViewPdf(props) {
+ const {onScaleChanged, ...restProps} = props;
+ const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
+ const scaleRef = useSharedValue(1);
+ const offsetX = useSharedValue(0);
+ const offsetY = useSharedValue(0);
+
+ const Pan = Gesture.Pan()
+ .manualActivation(true)
+ .onTouchesMove((evt) => {
+ if (offsetX.value !== 0 && offsetY.value !== 0) {
+ // if the value of X is greater than Y and the pdf is not zoomed in,
+ // enable the pager scroll so that the user
+ // can swipe to the next attachment otherwise disable it.
+ if (Math.abs(evt.allTouches[0].absoluteX - offsetX.value) > Math.abs(evt.allTouches[0].absoluteY - offsetY.value) && scaleRef.value === 1) {
+ attachmentCarouselPagerContext.shouldPagerScroll.value = true;
+ } else {
+ attachmentCarouselPagerContext.shouldPagerScroll.value = false;
+ }
+ }
+ offsetX.value = evt.allTouches[0].absoluteX;
+ offsetY.value = evt.allTouches[0].absoluteY;
+ });
+
+ const updateScale = useCallback(
+ (scale) => {
+ scaleRef.value = scale;
+ },
+ [scaleRef],
+ );
+
+ return (
+
+
+
+ {
+ updateScale(scale);
+ onScaleChanged();
+ }}
+ />
+
+
+
+ );
+}
+
+AttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
+AttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
+
+export default memo(AttachmentViewPdf);
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.js
new file mode 100644
index 000000000000..103ff292760f
--- /dev/null
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.js
@@ -0,0 +1,17 @@
+import React, {memo} from 'react';
+import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
+import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
+
+function AttachmentViewPdf(props) {
+ return (
+
+ );
+}
+
+AttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
+AttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
+
+export default memo(AttachmentViewPdf);