How to implement drag after long press?

[laptou]

The docs say:

Simply set manualActivation to true on a PanGesture and use StateManager to fail the gesture if the user attempts to drag the component sooner than the duration of the long press.

However, I can't figure out how to measure timing in the callbacks of the PanGesture, because the app crashes if I try to use setTimeout, and even if I were able to use setTimeout, I can't get a reference to the GestureStateManager except in the touch callbacks, so I'm not sure how to move the gesture into the START state.

Here's what I have so far:

  const isPressed = useSharedValue(false);
  const isDragging = useSharedValue(false);

  const start = useSharedValue({
    x: 0,
    y: 0,
  });

  const offset = useSharedValue({
    x: 0,
    y: 0,
  });

const gesture =
  Gesture.Pan()
    .manualActivation(true)
    .onBegin((evt) => {
      console.log('pan begin');
    })
    .onStart(() => {
      console.log('pan start');
      isPressed.value = true;
      offset.value = {
        x: 0,
        y: 0,
      };
    })
    .onTouchesDown((evt, state) => {
      if (evt.numberOfTouches !== 1) {
        state.fail();
      }

      isPressed.value = true;
      start.value = {
        x: evt.allTouches[0].x,
        y: evt.allTouches[0].y,
      };

      // using setTimeout here causes a crash, and using runOnJS doesn't fix it 

      // runOnJS(setTimeout)(() => {
      //   isDragging.value = true;
      //   state.activate();
      // }, 500);
    })
    .onTouchesMove((evt, state) => {
      isPressed.value = true;

      const offsetX = start.value.x - evt.allTouches[0].x;
      const offsetY = start.value.y - evt.allTouches[0].y;

      const dist = Math.sqrt(offsetX * offsetX + offsetY * offsetY);

      if (dist > 10) {
        state.fail();
      }
    })
    .onUpdate((evt) => {
      offset.value = {
        x: evt.translationX,
        y: evt.translationY,
      };
    })
    .onFinalize(() => {
      offset.value = {
        x: 0,
        y: 0,
      };
      isPressed.value = false;
      isDragging.value = false;

      console.log('pan finalize');
    });

[JasonCareter]

well, you're supposed to use composition gestures . Passed a Gesture.Exclusive( longPressGesture, panGesture ) to the target View .
Make a SharedValue to record the state whether long press activated . So , you can activate the pan gesture manually inside the onTouchesMove callback when the long-press state is true . With this little change , you can get what you want as your question described .

[Bayramito]

There you go,

So,
first of all on onPress event it's showing a bubble as you can see.
Then when i start holding, it's starting to record... if i release it will send the voice message.
but instead, i swipe to the left smoothly, and after like 100px it cancels everything. (i am not releasing my finger!!!)

RPReplay_Final1706519973.mov

[JasonCareter]

well, it seems one gesture is enough

[JasonCareter]

okay, i'm wrong about that , we need long-press and pan-gesture. first , you should use Simultaneous to let them response to user's interaction at the same time , then you need to record the timestamp when user triggered the event [onTouchDown] of PanGesture, in the [onTouchUp] event, you can calculate the time diff, if it's less than 100 (50 or 200 、depends on you、any num you want) milliseconds and the longPress is not triggered、that's when you should invoke your onTap function. what's next, when your long-press triggered, you're supposed to "run some animation and start recording ". in the [onTouchMove] event , you can observer the distance among Axis-X , when it is greater than some value, you are supposed to invoke you Cancel function under that condition. well, that's all you need to achieve the effect you want 🎉

[Bayramito]

Well, there is a minDuration prop to give a delay to long press :)
but i get your point thanks a lot :)

[JasonCareter]

u'are welcome , i've been working on a great project based on flutter for about one year and i didn't write react-native much, so i can't remember much api details of this library 😂