Migrate to react-native-gesture-handler@2.x.x

Author: luutruong

demo/components/ImageViewer/Image.tsx

@@ -15,11 +15,9 @@ import {
  Platform,
 } from 'react-native';
 import {
- HandlerStateChangeEvent,
- TapGestureHandler,
- PinchGestureHandler,
- State,
- GestureEvent,
+ GestureDetector,
+ Gesture,
+ GestureStateChangeEvent,
 } from 'react-native-gesture-handler';
 import {ImageComponentOptionalProps, ImageComponentProps, ImageComponentState} from './types';
 
@@ -157,8 +155,8 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  private _getMaximumScale = (): number => 2.5;
  private _getMinimumScale = (): number => 1.0;
 
- private _handleImageZoomInOut = (evt: HandlerStateChangeEvent) => {
- this._debug('double tab triggered', '_scaleNum', this._lastScale, evt.nativeEvent, 'ratio', this._getRatio());
+ private _handleImageZoomInOut = (evt: GestureStateChangeEvent<any>) => {
+ this._debug('double tab triggered', '_scaleNum', this._lastScale, evt, 'ratio', this._getRatio());
 
  if (this._lastScale > this._getMinimumScale()) {
  this._translateXY.setOffset({x: 0, y: 0});
@@ -187,8 +185,8 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  const newHeight = scale * oldHeight;
  const padding = 50;
 
- let x = evt.nativeEvent.x as number;
- let y = evt.nativeEvent.y as number;
+ let x = evt.x as number;
+ let y = evt.y as number;
 
  const horizontalCenter = (newWidth - SCREEN_WIDTH) / 2;
  const verticalCenter = (newHeight - SCREEN_HEIGHT) / 2;
@@ -257,49 +255,45 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
 
  private _onImageLoadEnd = () => this.setState({loading: false});
 
- private _onPinchHandlerStateChange = (evt: HandlerStateChangeEvent) => {
- if (evt.nativeEvent.oldState === State.ACTIVE) {
- this._debug('_onPinchHandlerStateChange', evt.nativeEvent);
+ private _onPinchEnd = (evt: GestureStateChangeEvent<any>) => {
+ this._debug('_onPinchEnd', evt);
 
-  let scale = evt.nativeEvent.scale as number;
-  if (scale < this._getMinimumScale()) {
-  scale = this._getMinimumScale();
+ let scale = evt.scale as number;
+ if (scale < this._getMinimumScale()) {
+ scale = this._getMinimumScale();
 
-  this._setIsZooming(false);
-  } else {
-  scale = Math.min(this._getMaximumScale(), scale);
-  this._setIsZooming(true);
-  }
+ this._setIsZooming(false);
+ } else {
+ scale = Math.min(this._getMaximumScale(), scale);
+ this._setIsZooming(true);
+ }
 
-  this._lastScale = scale;
+ this._lastScale = scale;
 
- this._translateXY.setOffset({x: 0, y: 0});
- this._lastOffset = {x: 0, y: 0};
- Animated.parallel([
- Animated.timing(this._scale, {
- toValue: scale,
- duration: 250,
- useNativeDriver: true,
- }),
- Animated.timing(this._translateXY, {
- toValue: {x: 0, y: 0},
- duration: 250,
- useNativeDriver: true,
- }),
- ]).start();
- }
+ this._translateXY.setOffset({x: 0, y: 0});
+ this._lastOffset = {x: 0, y: 0};
+ Animated.parallel([
+ Animated.timing(this._scale, {
+ toValue: scale,
+ duration: 250,
+ useNativeDriver: true,
+ }),
+ Animated.timing(this._translateXY, {
+ toValue: {x: 0, y: 0},
+ duration: 250,
+ useNativeDriver: true,
+ }),
+ ]).start();
  };
- private _onPinchGestureEvent = (evt: GestureEvent) => {
- if (evt.nativeEvent.state === State.ACTIVE) {
- const scale = this._lastScale * (evt.nativeEvent.scale as number);
+ private _onPinchUpdate = (evt: GestureStateChangeEvent<any>) => {
+ const scale = this._lastScale * (evt.scale as number);
 
- if (scale < this._getMinimumScale()) {
- this._scale.setValue(this._getMinimumScale());
- this._setIsZooming(false);
- } else {
- this._scale.setValue(Math.min(this._getMaximumScale(), scale));
- this._setIsZooming(true);
- }
+ if (scale < this._getMinimumScale()) {
+ this._scale.setValue(this._getMinimumScale());
+ this._setIsZooming(false);
+ } else {
+ this._scale.setValue(Math.min(this._getMaximumScale(), scale));
+ this._setIsZooming(true);
  }
  };
 
@@ -373,6 +367,18 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  return <Animated.View style={footerAnim}>{innerComponent}</Animated.View>;
  };
 
+ private _gestureDoubleTap = () => Gesture.Tap().maxDuration(250).numberOfTaps(2).onStart((evt) => {
+ console.log('_gestureDoubleTap', 'onStart');
+ this._handleImageZoomInOut(evt);
+ });
+ private _gesturePinch = () => Gesture.Pinch().onEnd((evt) => {
+ console.log('_gesturePinch', 'onEnd');
+ this._onPinchEnd(evt);
+ }).onUpdate((evt) => {
+ console.log('_gesturePinch', 'onUpdate', evt);
+ this._onPinchUpdate(evt);
+ });
+
  static getDerivedStateFromProps(
  nextProps: Readonly<ImageComponentProps>,
  prevState: Readonly<ImageComponentState>
@@ -442,14 +448,9 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  style={moveObjStyle}
  {...(this.state.isZooming || Platform.OS === 'ios' ? this._panResponder.panHandlers : {})}
  renderToHardwareTextureAndroid>
- <TapGestureHandler numberOfTaps={2} onActivated={this._handleImageZoomInOut}>
- <PinchGestureHandler
- onGestureEvent={this._onPinchGestureEvent}
- onHandlerStateChange={this._onPinchHandlerStateChange}
- >
- <RNImage source={this.props.source} style={computeImageStyle} onLoadEnd={this._onImageLoadEnd} />
- </PinchGestureHandler>
- </TapGestureHandler>
+ <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()}

demo/ios/Podfile.lock

@@ -333,7 +333,7 @@ PODS:
  - React-cxxreact (= 0.65.1)
  - React-jsi (= 0.65.1)
  - React-perflogger (= 0.65.1)
- - RNGestureHandler (1.10.3):
+ - RNGestureHandler (2.2.0):
  - React-Core
  - Yoga (1.14.0)
  - YogaKit (1.18.1):
@@ -513,10 +513,10 @@ SPEC CHECKSUMS:
  React-RCTVibration: 92d41c2442e5328cc4d342cd7f78e5876b68bae5
  React-runtimeexecutor: 85187f19dd9c47a7c102f9994f9d14e4dc2110de
  ReactCommon: eafed38eec7b591c31751bfa7494801618460459
- RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+ RNGestureHandler: bf572f552ea324acd5b5464b8d30755b2d8c1de6
  Yoga: aa0cb45287ebe1004c02a13f279c55a95f1572f4
  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: 9f6336c9fe0a9aa96040f70b4f16111bceab53aa
 
-COCOAPODS: 1.10.2
+COCOAPODS: 1.11.2

demo/package.json

@@ -13,7 +13,7 @@
  "axios": "^0.21.4",
  "react": "17.0.2",
  "react-native": "0.65.1",
- "react-native-gesture-handler": "^1.10.3"
+ "react-native-gesture-handler": "^2.2.0"
  },
  "devDependencies": {
  "@babel/core": "^7.15.5",