How to click only on the colored part of the image but not on the white background

Asked Sep 12 '22 at 08:52

Active Sep 12 '22 at 09:00

Viewed 81 times

I am trying to render an image in react native. I want to select any part of that image. By selecting I mean I am now rendering a circle every time I press on the image.

You can find the codes here

The image now looks like this.

If the image doesn't load, then a backup image

This is fine. It works exactly I expect it to. But I can also select in the white background which is something I want to avoid. I want to only enable the clicking when clicked inside the t-shirt colors not on the white background. Now, how can I prevent the users from clicking on the white background instead of the image?

I know why this is happening, I also tried to implement this using svg image (You can find it in the repo, check out the SafeAreaRegion.tsx file).

How can I implement this?

edited Sep 12 '22 at 09:00

asked Sep 12 '22 at 08:52

Pranta

2,928
7
24
37

sorry, I am using react native, not expo – Pranta Sep 12 '22 at 09:18
yes but you can also post RN codes there, unless you have some native dependency for the above error – Gaurav Roy Sep 12 '22 at 09:21
Sorry, I am not really familiar with expo. But I created this link, https://snack.expo.dev/@prantadutta/selecting-image-area does this help? – Pranta Sep 12 '22 at 09:31
yes workks, give me some time, will check – Gaurav Roy Sep 12 '22 at 09:34
hey you cant @Pranta, for that image area you cant do anything unless its an svg . – Gaurav Roy Sep 12 '22 at 13:04
@GauravRoy thanks for replying. My Github repo has an example with svg. You can check that out. I would have added that to the expo snack but I don't know how to implement svg with expo. – Pranta Sep 13 '22 at 03:14

How to click only on the colored part of the image but not on the white background

0 Answers0