How to draw square to tag an object. (React Native)

Question

I see many mobile apps having a feature that user can draw a square to indicate something to tag on the image.

I\'m building Face Tagging app and basical

Answer 1

You can use React Native ART library to draw shapes on top of image. It is a standard library that ships with React Native (although not linked to the binary by default).

Regarding the algorithm:

• Render an image
• Overlay image with React Native's ART.Surface
• Detect taps to get coordinates + overlay the rest of the image
• Once you have coordinates of the tap, you can draw a shape you want
• Stop drawing shape when user removes his finger (onPressOut event)

Where to go from here:

• Basic tutorial, explaining how to wire up React Native and ART
• Unofficial(there no official one) documentation

Answer 2

You can add children (in your case, square Views) to an Image tag, so you could do something like

<Image src={...}>
  <View
    style={{
      position: 'absolute',
      top: 120
      left: 100,
      height: 50,
      width: 50,
      borderWidth: 1
    }}
  />
</Image>

You can get the x and y coordinates with the PanResponder API instead of hardcoding the top and left style properties

Edit: RN 50=< Removed support of nested content inside , use ImageBackground instead