I am currently developing an object detection app using React Native. The process involves sending an image to the Google Vision API, which then returns a JSON file containing coordinates and sizes of objects detected within the image. My goal is to draw rectangles that highlight these objects on the image. However, I am facing a challenge in determining the proper method to achieve this. I have attempted placing div elements on the image, but encountered an issue due to the resizeMode='contain' attribute set on the image element. This limitation makes it difficult to identify the x = 0, y = 0 point, as well as the actual size of the image.
<Image source = ... resizeMode='contain' style={{flex: 1}}/>
Could you provide guidance on how I can accurately determine the position and size of the image? Additionally, do you have any recommendations for effectively drawing these rectangles using React?