From f1e476f7e6d16e94f3f83dcbff5e2a25040e9a0f Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Thu, 5 Aug 2021 18:18:48 -0700 Subject: [PATCH 1/4] Fix broken two touch zoom for Attachment Images --- src/components/ImageView/index.native.js | 42 ++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js index b7d519df7b69..39114f50cd99 100644 --- a/src/components/ImageView/index.native.js +++ b/src/components/ImageView/index.native.js @@ -1,7 +1,8 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {View} from 'react-native'; +import {View, PanResponder} from 'react-native'; import ImageZoom from 'react-native-image-pan-zoom'; +import _ from 'underscore'; import ImageWithSizeCalculation from '../ImageWithSizeCalculation'; import styles, {getWidthAndHeightStyle} from '../../styles/styles'; import variables from '../../styles/variables'; @@ -31,6 +32,28 @@ class ImageView extends PureComponent { this.doubleClickInterval = 175; this.imageZoomScale = 1; this.lastClickTime = 0; + this.amountOfTouches = 0; + + // PanResponder used to capture how many touches are active on the attachment image + this.panResponder = PanResponder.create({ + onStartShouldSetPanResponder: this.handleOnStartShouldSetPanResponder.bind(this), + }); + } + + /** + * Handler for the initial tap for the PanResponder on our ImageZoom overlay View + * + * @param {Event} e + * @param {GestureState} gestureState + * @returns {Boolean} + */ + handleOnStartShouldSetPanResponder(e, gestureState) { + if (_.isNumber(gestureState.numberActiveTouches)) { + this.amountOfTouches = gestureState.numberActiveTouches; + } + + // We don't need to set the panResponder since all we care about is checking the gestureState, so return false + return false; } render() { @@ -54,10 +77,11 @@ class ImageView extends PureComponent { imageHeight={this.state.imageHeight} onStartShouldSetPanResponder={(e) => { const isDoubleClick = new Date().getTime() - this.lastClickTime <= this.doubleClickInterval; + const touches = this.amountOfTouches; 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) { + if (touches === 2 || this.imageZoomScale !== 1) { return true; } @@ -95,6 +119,20 @@ class ImageView extends PureComponent { this.setState({imageHeight, imageWidth}); }} /> + {/** + Create an invisible view on top of the image so we can capture and set the amount of touches before + the ImageZoom's PanResponder does. Children will be triggered first, so this needs to be inside the + ImageZoom to work + */} + ); From 90f53daf54ae57d91f8d3c6e3a0dda4d7b4ca55d Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Thu, 5 Aug 2021 18:30:03 -0700 Subject: [PATCH 2/4] lint --- src/components/ImageView/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js index 39114f50cd99..733a6d11d6d7 100644 --- a/src/components/ImageView/index.native.js +++ b/src/components/ImageView/index.native.js @@ -75,7 +75,7 @@ class ImageView extends PureComponent { cropHeight={windowHeight} imageWidth={this.state.imageWidth} imageHeight={this.state.imageHeight} - onStartShouldSetPanResponder={(e) => { + onStartShouldSetPanResponder={() => { const isDoubleClick = new Date().getTime() - this.lastClickTime <= this.doubleClickInterval; const touches = this.amountOfTouches; this.lastClickTime = new Date().getTime(); From ca699d6731e1aa8a0a14dd59cbd0855691f2c913 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Mon, 9 Aug 2021 15:16:29 -0700 Subject: [PATCH 3/4] remove unnecessary const --- src/components/ImageView/index.native.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js index 733a6d11d6d7..15ee22da0106 100644 --- a/src/components/ImageView/index.native.js +++ b/src/components/ImageView/index.native.js @@ -77,11 +77,10 @@ class ImageView extends PureComponent { imageHeight={this.state.imageHeight} onStartShouldSetPanResponder={() => { const isDoubleClick = new Date().getTime() - this.lastClickTime <= this.doubleClickInterval; - const touches = this.amountOfTouches; 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 (touches === 2 || this.imageZoomScale !== 1) { + if (this.amountOfTouches === 2 || this.imageZoomScale !== 1) { return true; } From a0ca78c66464e8f2064ab0dfbc43a8b6549d7090 Mon Sep 17 00:00:00 2001 From: Joe Gambino Date: Mon, 9 Aug 2021 15:19:56 -0700 Subject: [PATCH 4/4] rename func --- src/components/ImageView/index.native.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js index 15ee22da0106..1a504e534932 100644 --- a/src/components/ImageView/index.native.js +++ b/src/components/ImageView/index.native.js @@ -36,18 +36,18 @@ class ImageView extends PureComponent { // PanResponder used to capture how many touches are active on the attachment image this.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: this.handleOnStartShouldSetPanResponder.bind(this), + onStartShouldSetPanResponder: this.updatePanResponderTouches.bind(this), }); } /** - * Handler for the initial tap for the PanResponder on our ImageZoom overlay View + * Updates the amount of active touches on the PanResponder on our ImageZoom overlay View * * @param {Event} e * @param {GestureState} gestureState * @returns {Boolean} */ - handleOnStartShouldSetPanResponder(e, gestureState) { + updatePanResponderTouches(e, gestureState) { if (_.isNumber(gestureState.numberActiveTouches)) { this.amountOfTouches = gestureState.numberActiveTouches; }