react-native-gesture-handler: PinchGestureHandler and PanGestureHandler not working simultaneously

Thanks in advance for the help! Please let me know if I can provide any extra information!

  • Platform: iOS
  • sdkVersion: 35.0.0

Refs:

  this.panHandler = React.createRef();
  this.pinchHandler = React.createRef();

Handlers:

  const scale = new Animated.Value(1);
  const onZoomEvent = (zoomeEvent) => {
    if (zoomeEvent.nativeEvent.scale >= 1) {
      return Animated.event([{
        nativeEvent: {
          scale,
        },
      }])(zoomeEvent);
    } else {
      return Animated.event([{ nativeEvent: { scale: 1 } }])(zoomeEvent);
    }
  };
  const onZoomStateChange = (event) => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      Animated.spring(scale, {
        toValue: 1,
      }).start();
    }
  };

  const translateX = new Animated.Value(0);
  const translateY = new Animated.Value(0);
  const handlePanEvent = (panEvent) => {
    return Animated.event(
      [{ nativeEvent: { translationX: translateX, translationY: translateY } }],
    )(panEvent);
  };
  const onPanStateChange = (event) => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      Animated.spring(translateX, {
        toValue: 0,
      }).start();
      Animated.spring(translateY, {
        toValue: 0,
      }).start();
    }
  };

JSX:

  <PinchGestureHandler
    ref={this.pinchHandler}
    simultaneousHandlers={this.panHandler}
    onGestureEvent={onZoomEvent}
    onHandlerStateChange={onZoomStateChange}
  >
    <Animated.View>
      <PanGestureHandler
        ref={this.panHandler}
        simultaneousHandlers={this.pinchHandler}
        minPointers={2}
        onGestureEvent={handlePanEvent}
        onHandlerStateChange={onPanStateChange}
      >
        <Animated.View>
          <Animated.Image
            source={{ uri: meme.get('url') }}
            style={{
              width: displayWidth,
              height: displayHeight,
              transform: [{ scale }, { translateX }, { translateY }],
            }}
            resizeMode="contain"
          />
        </Animated.View>
      </PanGestureHandler>
    </Animated.View>
  </PinchGestureHandler>

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 11
  • Comments: 19 (1 by maintainers)

Most upvoted comments

I am using PanResponder and pinch GestureHandler and faced the same issue and I fixed it by including a condition(gestureState.numberActiveTouches) in onStartShouldSetPanResponder value inside PanResponder.create(), below is my code eg:- gestureState.numberActiveTouches = 1 means touch event gestureState.numberActiveTouches = 2 means pinch event

  onStartShouldSetPanResponder: (evt, gestureState) => {if(gestureState.numberActiveTouches == 2){return false } else{return true} },

I am using PanResponder and pinch GestureHandler and faced the same issue and I fixed it by including a condition(gestureState.numberActiveTouches) in onStartShouldSetPanResponder value inside PanResponder.create(), below is my code eg:- gestureState.numberActiveTouches = 1 means touch event gestureState.numberActiveTouches = 2 means pinch event

  onStartShouldSetPanResponder: (evt, gestureState) => {if(gestureState.numberActiveTouches == 2){return false } else{return true} },

This fixed the problem for me

I had a problem with this too, solved it by putting a flex: 1 to all the <Animated.View>