Pan handler per finger guiding two squares

[Noitidart]

I tried to use the cross handler docs from react-native-gesture-handler.

I know this is possible with two seperate elements but I need nested pan gesture handler as I'm trying to do a custom pinch.

I am trying to create two pan gesture handlers and two squares. The first square should follow the first finger, and second square should follow the second finger. I used two PanGestureHandlers. Maybe should I use PinchGestureHandler?

I kind of accomplished that with this Expo Snack demo: https://snack.expo.dev/@noitidart/pan-handler-per-finger

Problems:

1. First problem is the 2nd square does not follow the 2nd finger. The position of the 2nd square is in between the 1st and 2nd finger.
2. Second problem is, while two fingers are touching, then you release the 2nd finger, the second square jump to the position of the first.

Is this possible?

Here is the code for the snack demo, can copy paste this to Expo Snack:

import React, { useCallback, useMemo, useRef } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';

export default function App() {
  const firstFingerState = {
    translateX: Animated.useValue(100),
    translateY: Animated.useValue(100)
  };

  const secondFingerState = {
    translateX: Animated.useValue(0),
    translateY: Animated.useValue(0)
  };
  const handleFirstFingerHandlerStateChange = useCallback(() => {}, []);

  const handleFirstFingerGestureEvent = useCallback(
    e => {
      firstFingerState.translateX.setValue(e.nativeEvent.x);
      firstFingerState.translateY.setValue(e.nativeEvent.y);
    },
    [firstFingerState.translateX, firstFingerState.translateY]
  );

  const handleSecondFingerHandlerStateChange = useCallback(() => {}, []);

  const handleSecondFingerGestureEvent = useCallback(
    e => {
      secondFingerState.translateX.setValue(e.nativeEvent.x);
      secondFingerState.translateY.setValue(e.nativeEvent.y);
    },
    [secondFingerState.translateX, secondFingerState.translateY]
  );

  const firstFingerStyle = useMemo(
    () => ({
      height: 100,
      width: 100,
      backgroundColor: 'steelblue',
      position: 'absolute',
      justifyContent: 'center',
      alignItems: 'center',
      transform: [
        { translateX: firstFingerState.translateX },
        { translateY: firstFingerState.translateY }
      ]
    }),
    [firstFingerState.translateX, firstFingerState.translateY]
  );
  const secondFingerStyle = useMemo(
    () => ({
      height: 100,
      width: 100,
      backgroundColor: 'slateblue',
      position: 'absolute',
      justifyContent: 'center',
      alignItems: 'center',
      transform: [
        { translateX: secondFingerState.translateX },
        { translateY: secondFingerState.translateY }
      ]
    }),
    [secondFingerState.translateX, secondFingerState.translateY]
  );

  const firstFingerPanHandler = useRef();
  const secondFingerPanHandler = useRef();
  return (
    <PanGestureHandler
      onGestureEvent={handleFirstFingerGestureEvent}
      onHandlerStateChange={handleFirstFingerHandlerStateChange}
      ref={firstFingerPanHandler}
      simultaneousHandlers={[secondFingerPanHandler]}
      // waitFor={[secondFingerPanHandler]}
      minPointers={1}
      maxPointers={1}
    >
      <PanGestureHandler
        onGestureEvent={handleSecondFingerGestureEvent}
        onHandlerStateChange={handleSecondFingerHandlerStateChange}
        ref={secondFingerPanHandler}
        // simultaneousHandlers={[firstFingerPanHandler]}
        // waitFor={[firstFingerPanHandler]}
        minPointers={2}
        maxPointers={2}
      >
        <View style={[StyleSheet.absoluteFill]}>
          <Animated.View style={firstFingerStyle}>
            <Text style={textStyle}>1</Text>
          </Animated.View>
          <Animated.View style={secondFingerStyle}>
            <Text style={textStyle}>2</Text>
          </Animated.View>
        </View>
      </PanGestureHandler>
    </PanGestureHandler>
  );
}

const textStyle = { fontSize: 54, fontWeight: 'bold', color: '#ffffff' };

[jgonet]

AFAIK we have something like that in examples, try rendering two Draggable components.

[Noitidart]

Thank you for the eyes very much!

But I think doesn't work for me. What I'm trying to do is, over a camera, there a square, I want that to be resizable. Pinch maintains the aspect ratio. So I want when two fingers are down, if one finger moves it should increase one side.

But with two draggables they have to touch that specific component to start the drag. My camera component is full screen. So they should be able to pinch anywhere within the cutout area. Here's screenshot of what I'm working on: