How to Pan and Zoom Image, add Markers on it and move markers as it is pan and zoomed?

[gpbaculio]

I am looking at implementing this in skia or reanimated, I am just confused how to do it, I have this Image

and in React Native I need to add circle markers as you see in this screenshot:

I have implemented pan and zoom before on Image but I am confused how to add those markers and render a component on press, and make those markers move as it is zoom and pan

[MatiPl01]

Hey!

I know that this discussion is old but this library may be helpful.

You cannot just simply recognize press gesture on elements rendered on the Skia Canvas. Another way to do this is just rendering all of circles and tooltips with React Native over the canvas. You would be able to easily control press gestures then.
To properly move these markers with the canvas, you would have to apply transforms to the parent component of the canvas and all marker components.