How to create a continious pinch and pan gesture?

[Glazzes]

Hi everyone! I'm currently building a pan with pinch feature, I have managed to get it right however I need the pan gesture to activate as soon as the pinch gesture ends, like the user is pinching but lifts a single finger off the screen then pan gesture continues with gesture until both fingers are lifted off the screen, currently I have a code like this one.

const tap =  Gesture.Tap()
  .maxDuration(250)
  .numberOfTaps(1)

const doubleTap = Gesture.Tap()
  .maxDuration(250)
  .numberOfTaps(2)

const pan = Gesture.Pan()
  .maxPointers(1)

const pinch = Gesture.Pinch()

const composedGesture = Gesture.Race(pinch, pan, Gesture.Exclusive(doubleTap, tap));

Currently it looks like this

recording_20240402_113536.mp4

[Zoxive]

If you make the gestures Gesture.Simultaneous then the user can stop pinching and continue dragging, but testing on my device it doesnt look like the user can "resume" pinching. (As in putting the lifted finger back down, you have to remove all fingers then start your gesture again)

Pinch -> Drag (✓)
Pinch -> Drag -> Pinch (x)

In the docs there is even an example of Simultaneous pinch/pan/rotate gesture over an image, that might be what you are looking for.

https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneous

[m-bert]

Hi @Glazzes! If I understood correctly, you want Pan to work after you finish Rotation.

You can try this code (assuming you have react-native-reanimated

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';

function Photo() {
  const translationX = useSharedValue(0);
  const translationY = useSharedValue(0);
  const scale = useSharedValue(1);
  const rotation = useSharedValue(0);

  const blockPan = useSharedValue(false);

  const style = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: translationX.value },
        { translateY: translationY.value },
        { scale: scale.value },
        { rotateZ: `${rotation.value}rad` },
      ],
    };
  });

  const rotationGesture = Gesture.Rotation()
    .onChange((e) => {
      rotation.value += e.rotationChange;
    })
    .onStart((e) => {
      blockPan.value = true;
    })
    .onFinalize((e) => {
      blockPan.value = false;
    });

  const panGesture = Gesture.Pan()
    .averageTouches(true)
    .onChange((e) => {
      if (blockPan.value) {
        return;
      }

      translationX.value += e.changeX;
      translationY.value += e.changeY;
    });

  const gesture = Gesture.Simultaneous(rotationGesture, panGesture);

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={[styles.button, style]} />
    </GestureDetector>
  );
}

export default function Example() {
  return (
    <View style={styles.home}>
      <Photo />
    </View>
  );
}

const styles = StyleSheet.create({
  home: {
    width: '100%',
    height: '100%',
    alignSelf: 'center',
    backgroundColor: 'plum',
  },
  button: {
    width: 200,
    height: 200,
    backgroundColor: 'green',
    alignSelf: 'center',
  },
});