Add ability to dismiss attachment modal via swipe

ios/Podfile.lock

@@ -402,6 +402,8 @@ PODS:
     - React-Core
   - RNCAsyncStorage (1.12.1):
     - React-Core
+  - RNCClipboard (1.5.1):
+    - React-Core
   - RNCMaskedView (0.1.10):
     - React
   - RNCPicker (1.9.11):
@@ -489,6 +491,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
+  - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - "RNFBAnalytics (from `../node_modules/@react-native-firebase/analytics`)"
@@ -599,6 +602,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/rn-fetch-blob"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-community/async-storage"
+  RNCClipboard:
+    :path: "../node_modules/@react-native-community/clipboard"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
   RNCPicker:
@@ -681,6 +686,7 @@ SPEC CHECKSUMS:
   ReactCommon: 4167844018c9ed375cc01a843e9ee564399e53c3
   rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
   RNCAsyncStorage: cb9a623793918c6699586281f0b51cbc38f046f9
+  RNCClipboard: 5e299c6df8e0c98f3d7416b86ae563d3a9f768a3
   RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459
   RNCPicker: 6780c753e9e674065db90d9c965920516402579d
   RNFBAnalytics: 2dc4dd9e2445faffca041b10447a23a71dcdabf8

src/components/AttachmentModal.js

@@ -102,6 +102,7 @@ class AttachmentModal extends PureComponent {
                     isVisible={this.state.isModalOpen}
                     backgroundColor={themeColors.componentBG}
                     onModalHide={this.props.onModalHide}
+                    propagateSwipe
                 >
                     <HeaderWithCloseButton
                         title={this.props.title}

src/components/ImageView/index.native.js

@@ -25,6 +25,12 @@ class ImageView extends PureComponent {
             imageWidth: 100,
             imageHeight: 100,
         };
+
+        // Use the default double click interval from the ImageZoom library
+        // https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts#L79
+        this.doubleClickInterval = 175;
+        this.imageZoomScale = 1;
+        this.lastClickTime = 0;
     }
 
     render() {
@@ -41,10 +47,37 @@ class ImageView extends PureComponent {
                 ]}
             >
                 <ImageZoom
+                    ref={el => this.zoom = el}
                     cropWidth={this.props.windowWidth}
                     cropHeight={windowHeight}
                     imageWidth={this.state.imageWidth}
                     imageHeight={this.state.imageHeight}
+                    onStartShouldSetPanResponder={(e) => {
+                        const isDoubleClick = new Date().getTime() - this.lastClickTime <= this.doubleClickInterval;
+                        this.lastClickTime = new Date().getTime();
+
+                        // Let ImageZoom handle the event if the tap is more than one touchPoint or if we are zoomed in
+                        if (e.nativeEvent.touches.length === 2 || this.imageZoomScale !== 1) {
+                            return true;
+                        }
+
+                        // When we have a double click and the zoom scale is 1 then programmatically zoom the image
+                        // but let the tap fall through to the parent so we can register a swipe down to dismiss
+                        if (isDoubleClick) {
+                            this.zoom.centerOn({
+                                x: 0,
+                                y: 0,
+                                scale: 2,
+                                duration: 100,
+                            });
+                        }
+
+                        // We must be either swiping down or double tapping since we are at zoom scale 1
+                        return false;
+                    }}
+                    onMove={({scale}) => {
+                        this.imageZoomScale = scale;
+                    }}
                 >
                     <ImageWithSizeCalculation
                         style={getWidthAndHeightStyle(this.state.imageWidth, this.state.imageHeight)}

src/styles/getModalStyles.js

@@ -79,10 +79,8 @@ export default (type, windowDimensions, popoverAnchorPosition = {}) => {
                 width: isSmallScreenWidth ? '100%' : windowWidth - 40,
             };
 
-            // The default swipe direction is swipeDown and by
-            // setting this to undefined we effectively disable the
-            // ability to swipe our modal
-            swipeDirection = undefined;
+            // Allow this modal to be dismissed with a swipe down or swipe right
+            swipeDirection = ['down', 'right'];
             animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';
             animationOut = isSmallScreenWidth ? 'slideOutRight' : 'fadeOut';
             shouldAddTopSafeAreaPadding = true;