How to map onPress events on single svg object in React Native?

Question

I'm currently developing a mobile application using React Native for my thesis on the University. I'm looking to create similar Interactive Map like for example here http://smudgeproof.net/siggraph.html where you have a map of inside of a building and you're able to click on each room to bring up new window with some additional information about that room.

I should be able to create this map on specific website and then show it in the up with functionality mentioned above. I was thinking about SVG to handle this stuff.

I'm able to draw svg map on screen using currently available 3rd party libraries for drawing SVG's like https://github.com/aksonov/react-native-svg-elements unfortunately none of those libraries support onpress event per svg element, to be able to show the description screen upon room click.

I should also add that rooms may have a lot of different shapes so it's not just rectangles, this makes it unable to build the map using just elements.

I would appreciate any help, or if you guys can come up with different solution to handle this problem, I'm familiar with Javascript, but haven't done any applications for iOS in objective-c, so I'm not sure how hard it would be to write a custom module to handle this.

Thanks!

UPDATE: Just in case anyone would try to solve similar problem, I ended up displaying those svgs through WebView and handling 'press' events on each objects through injected JavaScript. Anyway thanks to all for the help! :)

Answer 1

The react-native-sgv library provides support for onPress() events now. See the following for examples: https://github.com/react-native-community/react-native-svg

If you would like to attach an onClick event to a group of elements, you can use the Symbol component of the svg library to link a group of elements together an attach an onPress event to any of the elements which will apply to the whole Symbol