PanResponder inside of PanResponder

Question

Currently, I have a View (let's call it View A) with a panhandler that calculates the x and y values of a touch position (x, y coordinates of a touch). I have a second view (let's call it View B) inside the parent view (View A) with a different panhandler. The purpose of the 2nd panhandler is to resize the box via dragging. Currently, View A masks View B. How can I make it so that View B's panhandler is called? There is a specific reason why I need a panhandler inside a panhandler so if anyone has any suggestions to how I can tackle this, I'd appreciate it very much!

Example code:

//View A
<View
    style={{position:'absolute'}}
    {...panResponder.panHandlers}
   ...
   // View B
   <View
    style={{position:'absolute'}}
    {...panResponder2.panHandlers}
   >
   </View>
</View>

PanResponder for View A:

 const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => true,
    onPanResponderStart: (event, gestureState) => {
      x = gestureState.x0;
      y = gestureState.y0;
      console.log(x, y)
    },
  });

PanResponder for View B:

 const panResponder2 = PanResponder.create({
        onMoveShouldSetPanResponder: () => true,
        onPanResponderMove: handlePanResponderMove, // this makes the box resize
      });

Answer 1

Use GestureDetector in the View A with Gesture.Race helper function!

Combine Gesture.Pan() and Gesture.Pinch() for handling the gestures.

More about that: https://docs.swmansion.com/react-native-gesture-handler/docs/api/gestures/gesture#gestureracegesture1-gesture2-gesture3--composedgesture