I have several overlapping images, with some areas transparent in each of them so the images underneath may be seen. I want the user to be able to select an image by touch. If one image is on top of another, they need to be able to select the below image by touching it through a transparent area of the top image, as they can see it through that area.
I see there are native solutions in iOS that allow touch to fall through based on the alpha property of the pixel. Is there any similar approach in React Native that will allow a touch to detect the first non-transparent pixel and identify the image that the pixel is from?
For future reference I managed to solve it in this way: Utilised this library to return a pixel colour for an image and X, Y coordinates https://github.com/alicansa/react-native-get-pixel
Calculated based on the X,Y coordinate of the touch the corresponding X,Y coordinate of each of the overlapping images.
Used image masks where the non-transparent parts of the image had a solid colour, and ran the pixel colour check on each image mask in order of top to bottom to see which returned a non [0,0,0] value. (This is because transparent areas return [0,0,0] in the above library, it does not appear to have an alpha check.)
The image masks have to be in the drawable folder on the Android folder structure, as described in the library. As I was using a solid colour where the images are non-transparent, it meant I could use a smaller resolution image mark for these checks which sped up how long it takes, as this is an asynchronous check.