Multiple gestures

[JohnKesko]

I'm using Skia to draw an image as the background and then move around two text blocks on top of it.

This works just fine with using a single gesture passed to the GestureDetector, but is it possible to have both of them active at the same time separately?
For example, i want to be able move the title block to the left side and release it and then move the body block to the right side.

This works fine:

const titleGesture = Gesture.Pan()
    .onChange((e) =>
    {
        titleX.value += e.changeX;
        titleY.value += e.changeY;
    })
    .onEnd(() =>
    {
        titleX.value = withDecay({
            clamp: [0, width],
        });
        titleY.value = withDecay({
            clamp: [0, height],
        });
    });

  <GestureDetector gesture={titleGesture}>
          <Canvas style={{ flex: 1 }}>
              {product && <SkiaImage image={skiaImage} rect={{ x: 0, y: 0, width, height }} fit="cover" />}
              <SkiaText x={titleX} y={titleY} text={title} font={font} color="white" />
          </Canvas>
  </GestureDetector>
            

But is it possible to do something like this?

  const titleGesture = Gesture.Pan()
      .onChange((e) =>
      {
          titleX.value += e.changeX;
          titleY.value += e.changeY;
      })
      .onEnd(() =>
      {
          titleX.value = withDecay({
              clamp: [0, width],
          });
          titleY.value = withDecay({
              clamp: [0, height],
          });
      });

  const bodyGesture = Gesture.Pan()
      .onChange((e) =>
      {
          bodyX.value += e.changeX;
          bodyY.value += e.changeY;
      })
      .onEnd(() =>
      {
          bodyX.value = withDecay({
              clamp: [0, width],
          });
          bodyY.value = withDecay({
              clamp: [0, height],
          });
      });

<GestureDetector gesture={titleGesture}>
    <GestureDetector gesture={bodyGesture}>
        <Canvas style={{ flex: 1 }}>
            {product && <SkiaImage image={skiaImage} rect={{ x: 0, y: 0, width, height }} fit="cover" />}
            <SkiaText x={titleX} y={titleY} text={title} font={font} color="white" />
            <SkiaText x={bodyX} y={bodyY} text={body} font={font} color="white" />
        </Canvas>
    </GestureDetector>
</GestureDetector>

[Glazzes]

The most inner gesture will always have the biggest priority, so far I'm concerned it's not possible.

[m-bert]

Hi @JohnKesko!

For example, i want to be able move the title block to the left side and release it and then move the body block to the right side.

If by release it you mean releasing the pointer, than it is not possible. What you could do is try to manipulate which gesture responds to events by making them simultaneous and using SharedValue to either activate callback or not.

[JohnKesko]

Thanks for reply. Tried a bunch of variations but couldn't get it to work unfortunately.

For example:

  const isTitleActive = useSharedValue(false);
  const isBodyActive = useSharedValue(false);

  const titleGesture = Gesture.Pan()
      .onBegin(() =>
      {
          isTitleActive.value = true;
      })
      .onChange((e) =>
      {
          if (isTitleActive.value)
          {
              titleX.value += e.changeX;
              titleY.value += e.changeY;
          }
      })
      .onEnd(() =>
      {
          if (isTitleActive.value)
          {
              titleX.value = withDecay({ clamp: [0, width] });
              titleY.value = withDecay({ clamp: [0, height] });
          }
          isTitleActive.value = false;
      });

  const bodyGesture = Gesture.Pan()
      .onBegin(() =>
      {
          isBodyActive.value = true;
      })
      .onChange((e) =>
      {
          if (isBodyActive.value)
          {
              bodyX.value += e.changeX;
              bodyY.value += e.changeY;
          }
      })
      .onEnd(() =>
      {
          if (isBodyActive.value)
          {
              bodyX.value = withDecay({ clamp: [0, width] });
              bodyY.value = withDecay({ clamp: [0, height] });
          }
          isBodyActive.value = false;
      });

  const combinedGesture = Gesture.Simultaneous(titleGesture, bodyGesture);

However, the result is the same, both blocks moves at the same time.

Don't know if my use case has come up/been requested before but would be sweet to be able to have something like

  const sequentialGesture = Gesture.Sequential(titleGesture, bodyGesture);
  const sequentialGroupGesture = Gesture.SequentialGroup(titleGesture, bodyGesture);

[m-bert]

Hi! @JohnKesko

For example:

The way you implemented that (at least in provided example) doesn't change anything. What I meant was to control one gesture from the other via SharedValue.

Don't know if my use case has come up/been requested before but would be sweet to be able to have something like

I'm not sure how would it work. I mean I get the idea, but assuming that both Pan gestures have the same view underneath, how would you decided when first ended in order to trigger second?

[m-bert]

Also, you can try to use manual gesture and manage its state using state manager.