[Android] Pinch Gesture Handler not trigger ACTIVE State

[Jackmekiss]

Description

When I use PinchGestureHandler for Android, It's triggering well the BEGAN state but just after it, it's directly cancelled. I'm sure it's a problem with PinchGestureHandler because when I use PanGestureHandler instead it work well.

Code

<PinchGestureHandler onGestureEvent={onGestureEvent}>

  <Animated.View
    ref={imageRef}
    style={[{ ...tailwind('bg-background-2 z-50') }, {
      width,
      height: width,
    }]}
  >
    <AnimatedFastImage
      style={[
        styles.image,
        tailwind('bg-background-2 z-50'),
        {
          opacity: isModalVisible && state.value === State.ACTIVE ? 0 : 1,
        },
        open && { top: width / 2 },
      ]}
      onLoadEnd={() => setIsLoaded(true)}
      height={width}
      onProgress={(e) => setProgress(e.nativeEvent.loaded
       / e.nativeEvent.total)}
      width={width}
      resizeMode={FastImage.resizeMode.contain}
      source={{
        uri: `https://ik.imagekit.io/sneakmart/tr:w-1000,h-1000${uri.slice(lastOccurence)}`,
        priority: FastImage.priority.high,
      }}
    />
  </Animated.View>
</PinchGestureHandler>

const getMesure = (focalX, focalY) => {
    imageRef.current.measure((x, _, width, height, pageX, pageY) => {
      y.value = pageY;
      foX.value = -(focalX - SIZE / 2);
      foY.value = -(focalY - SIZE / 2);
    });
  };

  const onGestureEvent = useAnimatedGestureHandler(
    {
      onStart: ({ focalX, focalY }) => {
        state.value = State.BEGAN;
        runOnJS(getMesure)(focalX, focalY);
      },
      onFinish: () => {
        console.log('finish')
      },
      onActive: ({
        focalX, focalY, scale: imageScale,
      }) => {
        if (state.value !== State.BEGAN && state.value !== State.ACTIVE) return;
        if (imageScale < 1) return;
        scale.value = imageScale;
        if (state.value === State.ACTIVE) {
          pinchX.value = (focalX - SIZE / 2);
          pinchY.value = (focalY - SIZE / 2);
        }
        if (state.value !== State.ACTIVE) {
          runOnJS(toggleIsGestureActive)(true);
          state.value = State.ACTIVE;
        }
      },
      onEnd: () => {
        scale.value = withTiming(1, {
          duration: 200,
        }, () => {
          runOnJS(toggleIsGestureActive)(false);
        });

        pinchX.value = withTiming(0, {
          duration: 200,
        });
        pinchY.value = withTiming(0, {
          duration: 200,
        });
        foX.value = withTiming(0, {
          duration: 200,
        });
        foY.value = withTiming(0, {
          duration: 200,
        });
        state.value = State.END;
        // });
      },
    },
    [imageRef],
  );

Expected behavior

The expected behavior is to get the state ACTIVE trigger

Actual behavior

After the state BEGAN, the state is atomically finish

Package versions

React: 17.0.1

React Native: 0.64.0

React Native Gesture Handler: 1.10.3

react-native-reanimated: ~2.0.0

List other libraries if relevant.

• React:
• React Native:
• React Native Gesture Handler:

[plasmarob]

I'm having this same issue. Why was it closed?

[Jackmekiss]

I closed it because I fix it. I wasn't properly use the props simultaneousHandlers

[plasmarob]

As a best practice, please say so in the future when closing an issue. Closing an issue without a reason given is an anti-pattern.

[Jackmekiss]

Of course, good luck with your problem !