Update builds

Author: luutruong

package.json

@@ -5,17 +5,15 @@
  "main": "dist/src/index.js",
  "license": "MIT",
  "peerDependencies": {
- "react-native": ">= 0.64.0"
+ "react-native": ">= 0.66.0"
  },
  "devDependencies": {
  "@types/react-native": "^0.65.0",
  "prettier": "^2.4.1",
- "react-native": ">= 0.64.0",
+ "react-native": ">= 0.66.0",
  "typescript": "^4.4.3"
  },
- "dependencies": {
- "react-native-gesture-handler": "^2.2.0"
- },
+ "dependencies": {},
  "files": [
  "package.json",
  "yarn.lock",

src/Image.tsx

@@ -14,12 +14,6 @@ import {
  SafeAreaView,
  Platform,
 } from 'react-native';
-import {
- GestureDetector,
- Gesture,
- GestureStateChangeEvent,
- gestureHandlerRootHOC,
-} from 'react-native-gesture-handler';
 import {ImageComponentOptionalProps, ImageComponentProps, ImageComponentState} from './types';
 
 const SCREEN_WIDTH = Dimensions.get('window').width;
@@ -43,6 +37,7 @@ class ImageComponent extends React.Component<ImageComponentProps, ImageComponent
  private _lastScale: number = 1;
 
  private _isGestureMoved: boolean = false;
+ private _lastTap: number = 0;
 
  constructor(props: ImageComponentProps) {
  super(props);
@@ -71,15 +66,27 @@ class ImageComponent extends React.Component<ImageComponentProps, ImageComponent
  onPanResponderTerminate: onPanEnd,
  onPanResponderRelease: onPanEnd,
  onPanResponderMove: onPanMove,
+
+ onPanResponderGrant: this._onPanResponderGrant,
  });
  }
 
  private _onShouldSetPanResponder(evt: GestureResponderEvent) {
- return evt.nativeEvent.touches.length === 1;
+ return evt.nativeEvent.touches.length <= 2;
+ }
+
+ private _onPanResponderGrant = (_evt: any, gesture: PanResponderGestureState) => {
+ if (gesture.numberActiveTouches === 2) {
+ this._debug('_onPanResponderGrant', gesture);
+ }
  }
 
  private _onPanResponderMove(_evt: any, gesture: PanResponderGestureState) {
  this._debug('_onPanResponderMove', 'dx', gesture.dx, 'dy', gesture.dy, this._lastOffset);
+ if (gesture.numberActiveTouches === 2) {
+ return;
+ }
+
  this._isGestureMoved = true;
 
  if (this._lastScale > this._getMinimumScale()) {
@@ -111,7 +118,22 @@ class ImageComponent extends React.Component<ImageComponentProps, ImageComponent
  this.props.onZoomStateChange(true);
  this._translateXY.setValue({x: 0, y: Math.max(0, gesture.dy)});
  }
- private _onPanResponderEnd(_evt: any, gesture: PanResponderGestureState) {
+ private _onPanResponderEnd(_evt: GestureResponderEvent, gesture: PanResponderGestureState) {
+ this._debug('_onPanResponderEnd', 'gesture.numberActiveTouches', gesture.numberActiveTouches);
+ if (gesture.numberActiveTouches === 0) {
+ this._debug('_onPanResponderEnd', 'gesture.dx', gesture.dx, 'gesture.dy', gesture.dy);
+ if (Math.abs(gesture.dx) < 10 && Math.abs(gesture.dy) < 10) {
+ this._handleTap({
+ x: gesture.x0,
+ y: gesture.y0
+ });
+
+ return; 
+ }
+ } else if (gesture.numberActiveTouches === 2) {
+ return;
+ }
+
  if (!this._isGestureMoved) {
  return;
  }
@@ -156,7 +178,7 @@ class ImageComponent extends React.Component<ImageComponentProps, ImageComponent
  private _getMaximumScale = (): number => 2.5;
  private _getMinimumScale = (): number => 1.0;
 
- private _handleImageZoomInOut = (evt: GestureStateChangeEvent<any>) => {
+ private _handleImageZoomInOut = (evt: {x: number; y: number}) => {
  this._debug('double tab triggered', '_scaleNum', this._lastScale, evt, 'ratio', this._getRatio());
 
  if (this._lastScale > this._getMinimumScale()) {
@@ -234,6 +256,19 @@ class ImageComponent extends React.Component<ImageComponentProps, ImageComponent
  }
  };
 
+ private _handleTap = (tapCoords: {x: number; y: number}) => {
+ const now = (new Date()).getTime();
+ const delta = now - this._lastTap;
+
+ this._debug('_handleTap', '_lastTap', this._lastTap, 'delta', delta);
+ if (delta <= 500) {
+ // double tap
+ this._handleImageZoomInOut(tapCoords);
+ }
+
+ this._lastTap = now;
+ };
+
  private _getRatio = () =>
  this.state.width
  ? this.state.width >= SCREEN_WIDTH
@@ -368,19 +403,6 @@ class ImageComponent extends React.Component<ImageComponentProps, ImageComponent
  return <Animated.View style={footerAnim}>{innerComponent}</Animated.View>;
  };
 
- private _gestureDoubleTap = () => Gesture.Tap().maxDuration(250).numberOfTaps(2).onStart((evt) => {
- this._debug('_gestureDoubleTap', 'onStart');
- this._handleImageZoomInOut(evt);
- this._debug('_gestureDoubleTap', 'this._handleImageZoomInOut', '-> ok');
- });
- private _gesturePinch = () => Gesture.Pinch().onEnd((evt) => {
- this._debug('_gesturePinch', 'onEnd');
- this._onPinchEnd(evt);
- }).onUpdate((evt) => {
- this._debug('_gesturePinch', 'onUpdate', evt);
- this._onPinchUpdate(evt);
- });
-
  static getDerivedStateFromProps(
  nextProps: Readonly<ImageComponentProps>,
  prevState: Readonly<ImageComponentState>
@@ -450,9 +472,7 @@ class ImageComponent extends React.Component<ImageComponentProps, ImageComponent
  style={moveObjStyle}
  {...(this.state.isZooming || Platform.OS === 'ios' ? this._panResponder.panHandlers : {})}
  renderToHardwareTextureAndroid>
- <GestureDetector gesture={Gesture.Exclusive(this._gestureDoubleTap(), this._gesturePinch())}>
  <RNImage source={this.props.source} style={computeImageStyle} onLoadEnd={this._onImageLoadEnd} />
- </GestureDetector>
  </Animated.View>
  <SafeAreaView style={styles.safeAreaContainer} pointerEvents="none">
  {this._renderHeader()}
@@ -496,6 +516,4 @@ const styles = StyleSheet.create({
  },
 });
 
-const Image = gestureHandlerRootHOC((props: ImageComponentProps) => <ImageComponent {...props} />);
-
-export default Image;
+export default ImageComponent;

yarn.lock

@@ -704,13 +704,6 @@
  exec-sh "^0.3.2"
  minimist "^1.2.0"
 
-"@egjs/hammerjs@^2.0.17":
- version "2.0.17"
- resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
- integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
- dependencies:
- "@types/hammerjs" "^2.0.36"
-
 "@hapi/hoek@^9.0.0":
  version "9.2.1"
  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.1.tgz#9551142a1980503752536b5050fd99f4a7f13b17"
@@ -928,11 +921,6 @@
  dependencies:
  "@types/node" "*"
 
-"@types/hammerjs@^2.0.36":
- version "2.0.41"
- resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.41.tgz#f6ecf57d1b12d2befcce00e928a6a097c22980aa"
- integrity sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -2094,13 +2082,6 @@ hermes-profile-transformer@^0.0.6:
  dependencies:
  source-map "^0.7.3"
 
-hoist-non-react-statics@^3.3.0:
- version "3.3.2"
- resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
- integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
- dependencies:
- react-is "^16.7.0"
-
 http-errors@1.8.1:
  version "1.8.1"
  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.1.tgz#7c3f28577cbc8a207388455dbd62295ed07bd68c"
@@ -2546,7 +2527,7 @@ lodash.throttle@^4.1.1:
  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
 
-lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.21:
+lodash@^4.17.14, lodash@^4.17.15:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -3340,7 +3321,7 @@ react-devtools-core@4.19.1:
  shell-quote "^1.6.1"
  ws "^7"
 
-react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -3359,17 +3340,6 @@ react-native-codegen@^0.0.8:
  jscodeshift "^0.11.0"
  nullthrows "^1.1.1"
 
-react-native-gesture-handler@^2.2.0:
- version "2.2.0"
- resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.2.0.tgz#a551f9ca33d8766d0a24268f49e0f1b05191b105"
- integrity sha512-WF25CNgn164bF9juW8N/jICIFXiEOgsxCuY7DRlnFdiH5ZfvMYtZHRC+zr1fFMap2ty1f2HWDQNVVSo0FDXP4A==
- dependencies:
- "@egjs/hammerjs" "^2.0.17"
- hoist-non-react-statics "^3.3.0"
- invariant "^2.2.4"
- lodash "^4.17.21"
- prop-types "^15.7.2"
-
 "react-native@>= 0.64.0":
  version "0.67.1"
  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.67.1.tgz#a9cc13f1a691e9bb23f146f001e11fc0157af51c"