How to highlight nested elements inside SVG and change their color or highlight them in react native

98 Views Asked by At

We have a map of a mall which is an image(SVG, or PNG), I'm asked to do the following:

there is an input above the Map where user can look for a store by name, when a store is chosen it should be selected in the Map like highlighted or something to show his position in the mall, the second task is :

the user can press on any store to select it we should highlight the store and open a bottomsheet.

my question is:

which solution could be used to accomplish this behavior, if an SVG is used i know that there are difficulties using TouchableOpacities inside and SVG, how can we highlight the selected store inside the card ? which data should i receive from backend ? i'm thinking of using an array where the first element in the array would be the first right top store in the map in our case the array should be somthing like this :

[A-FITNESS , DECATLON, DNS , KARI ]

i'm thinking of using an array where the first element in the array would be the first right top store in the map in our case the array should be somthing like this :

[A-FITNESS , DECATLON, DNS , KARI ]

but i don't know how to click nested elements inside an SVG and how to change the color or highlight a part of the SVG

0

There are 0 best solutions below