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 basically user draws square on the boundary of human's face on the image.

I've Googled it many times but I'm not sure RN has some feature library for tagging.

How can I achieve this? Is there any good library to draw square on image? And it will be even better if I can remember its coordinate width, height, and position of the rectangle.

Any idea or suggestion will be highly appreciated!

This is an example below

Fertile

This is sooooo frustrating. Not even a clue – Fertile

Did you find a solution for this? If then can you kindly post your solution here – Whimwham

Hi. If you solved the problem then can you post your solution in github and share the link. – Mellifluent

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

Cacology

React.surface looks great but it looks like too hard to implement it. :( Thanks though! – Fertile

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

Medina

Very Cool. I found very useful library: react-native-gesture-responder – Fertile

PanResponder API seems very useful on this project – Fertile

Updated link to ImageBackground – Pelage

Answer 3

I'd suggest looking into react-native PanResponder, or react-native-gesture-handler PanGestureHandler. It is a component that responds to touch input, and calculates the x and y values when you drag your finger, it will also tell you the distance travelled from where the finger started.

You can use this data and pass the x and y travel distance back into the width and height value of a View component to make it drag out a box with your finger.

EDIT:

Here's something I just put together as a bit of an experiment using react-native-gesture-handler.

import { View } from 'react-native';
import { GestureEvent, PanGestureHandler, PanGestureHandlerEventPayload } from 'react-native-gesture-handler';

const Test = () => {
  const [start, setStart] = useState<{ x: number; y: number }>(null);
  const [end, setEnd] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
  const [dimensions, setDimensions] = useState<{ w: number; h: number }>({ w: 0, h: 0 });

  const onPress = (event: GestureEvent<PanGestureHandlerEventPayload>) => {
    const { x, y, translationX, translationY } = event.nativeEvent;
    if (!start) setStart({ x: y, y: x });
    setDimensions({ w: translationX, h: translationY });
  };

  const onEnd = () => {
    if (!start) return;

    setEnd(start);
    setStart(null);
  };

  return (
    <View style={{ flex: 1 }}>
      <PanGestureHandler onGestureEvent={onPress} onEnded={onEnd}>
        <View style={{ width: '100%', height: '100%', backgroundColor: 'red' }}>
          <View
            style={{
              position: 'absolute',
              backgroundColor: 'blue',
              top: start?.x ?? end?.x,
              left: start?.y ?? end?.y,
              width: dimensions?.w ?? 0,
              height: dimensions?.h ?? 0,
            }}
          />
        </View>
      </PanGestureHandler>
    </View>
  );
};

export default Test;

Doublequick