I’m trying to handle gestures on a PNG image in React Native (specifically [email protected]). I managed to have them working on the “square” that contains the png, but I would like to make them work only on the image itself, not on its transparent background.

To make it clear:

PNG photo

Green: Accept Gesture, Red: Don’t

These are my imports:

import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  runOnJS,
} from "react-native-reanimated";

And this is the section of code I’m having trouble with:

const composed = Gesture.Simultaneous(
    pinchGesture,
    panGesture,
    tapGesture,
    longPressGesture
  );
  
  return (
    <GestureDetector gesture={composed}>
      <Animated.Image
        source={{ uri: item.image_url }}
        resizeMode="contain"
        style={[
          animatedStyle,
          {
            height: imageSize,
            width: imageSize,
            position: "absolute"
          },
        ]}
      />
    </GestureDetector>
  );

I’m omitting the section where I manage the gestures for brevity.

I tried using a MaskedView, but I gave up for two reasons:

1. The image itself has dynamic scale and position so passing the image source to the maskElement isn’t enough;
2. MaskedView doesn’t support AnimatedStyle so I can’t dynamically change scale and position of the MaskedView.

I’m new to StackOverflow and to React Native development , be patient 🙁