How to get the dimensions and position of Native elements in React Native

Question

I am using a framework called react-native-svg to draw SVG elements in a react native view.

My goal is that when I tap on the view (I use a PanResponder on the global view to get that), the element that is the closest to the tap changes.

I have everything that I need, except one thing: I need to be able to know the position of my svg elements, as well as their size, in order to find the one that was the closest to the tap event.

Now, I've tried most of the things available I'd say:

• onLayout: those svg elements don't appear to be views and therefore don't call the onLayout callback.
• this.refs.elem.measure: same as onLayout, they are not views therefore the measure function is undefined.
• UIManager.measure(ReactNative.findNodeHandle(this.refs.elem), callback): returns 0 for all values, apart from the react-native-svg component Svg, but not for all the others: G, Path, Line, etc.

So I was wondering if there was any other solution or if I was doomed. :) Do I have to change something in react-native-svg that would allow me to find these values or is there any solution ready for me?

Thanks!

Answer 1

I finally had to add some functionalities to react-native-svg so I could get the size of the different elements.

It's not very well done, but I may come back to it for a cleaner solution and submit a PR then.

Thanks.