React Native clickable Image with Alpha

Question

I have an image in a .png format with the alpha channel and i wish it to be clickable. The click should be detected only if the real image is clicked (not the alpha background).

<TouchableHighlight onPress={this.imgClick}>
        <Image
          source={this.img1}
        />
</TouchableHighlight>

And i want to create a clickable circle of these elements

Thank you for helping and i wish you a Merry X-Mas !!

Answer 1

You can detect where on the image has been clicked and then you should have some metadata on the image to detect that it is in the non-alpha bounds.

imgClick = ({nativeEvent: {locationX, locationY}}) => {
    if (ImageService.inBounds(image, locationX, locationY)) {
         // do your event handling here
    }
}

ImageService would be where your metadata and logic is stored for each image. You probably want a simple point in polygon algorithm.

https://en.wikipedia.org/wiki/Point_in_polygon