title: How to draw bounding boxes after processing image with OCR using react-native-firebase-mlkit vision
body: <p>I have successfully detected text elements on an image taken with react-native-camera. The <code>vision().textRecognizerProcessImage(photoUri)</code> is successfully returning the detected text.</p>
  
  <pre><code>// take the photo from the camera
    takePicture = async () =&gt; {
      try {
        const options = {
          quality: 0.8,
          base64: true,
          skipProcessing: true,
        };
        const picture = await this.camera.takePictureAsync(options);
        console.log('picture', picture);
        const {uri, width, height} = picture;
        // saving the pixel size of the selected image too 
        // for boxes position/size calculation
        this.setState({
          photoUri: uri,
          imgPixelHeight: height,
          imgPixelWidth: width,
        });
      } catch (e) {
        console.warn(e);
      }
    };
  
  // processing the image to detect text
    processImage = async () =&gt; {
      const {photoUri} = this.state;
      console.log('processing Image...');
      vision()
        .textRecognizerProcessImage(photoUri)
        .then(result =&gt; {
          console.log('processImage response', result);
          this.displayProcessResult(result);
        })
        .catch(error =&gt; {
          console.log('process error', error);
        });
    };
  
  // setting the elements
    displayProcessResult(result) {
      const textElements = this.getElements(result);
      this.setState({displayRectangles: true, textElements}, () =&gt; {
        console.log('my new state', this.state);
      });
    }
  
  // getting only the elements objects from mlkit vision
    getElements(result) {
      let allElements = [];
      const {blocks} = result;
      blocks.forEach(block =&gt; {
        const {lines} = block;
        lines.forEach(line =&gt; {
          const {elements} = line;
          allElements = [...allElements, ...elements];
        });
      });
  
      console.log('displayProcessResult response', allElements);
  
      return allElements;
    }
  
  // drawing the boxes aronund the detected text elements
    drawRectangles() {
      const {textElements} = this.state;
      return textElements.map((element, index) =&gt; this.drawBox(element, index));
    }
  
    drawBox = (e, i) =&gt; {
      let [left, top, right, bottom] = e.boundingBox;
      const {imageWidh, imageHeight, imgPixelWidth, imgPixelHeight} = this.state;
  
      // calculating the absolute position of each box base on the pixel size of the 
      // of the image and the on screen sizes (imageWidh, imageHeight) given by react native 
      // (check the renderCameraOrImage funtion) 
  
      left = (left / imgPixelWidth) * imageWidh;
      right = (right / imgPixelWidth) * imageWidh;
      top = (top / imgPixelHeight) * imageHeight;
      bottom = (bottom / imgPixelHeight) * imageHeight;
  
      const boxWidth = Math.abs(left - right);
      const boxHeight = Math.abs(top - bottom);
  
      console.log('box', boxWidth, boxHeight);
  
      return (
        &lt;TouchableOpacity
          key={i}
          style={{
            position: 'absolute',
            left,
            top,
            width: boxWidth,
            height: boxHeight,
            borderWidth: 1,
            borderColor: Colors.green,
            zIndex: 2000,
          }}
        /&gt;
      );
    };
  
  // rendering the image or the camera base on the photoUri definition in the state
    renderCameraOrImage() {
      // render cam or img
      const {photoUri} = this.state;
      return (
        &lt;View&gt;
          {!photoUri ? (
            &lt;RNCamera
              ref={ref =&gt; {
                this.camera = ref;
              }}
              style={styles.camera}
              type={RNCamera.Constants.Type.back}
              flashMode={RNCamera.Constants.FlashMode.off}
              androidCameraPermissionOptions={{
                title: 'Permission to use camera',
                message: 'We need your permission to use your camera',
                buttonPositive: 'Ok',
                buttonNegative: 'Cancel',
              }}
              zoom={this.state.zoomValue}
            /&gt;
          ) : (
            &lt;Image
              source={{uri: this.state.photoUri}}
              style={styles.camera}
              onLayout={event =&gt; {
                var {x, y, width, height} = event.nativeEvent.layout;
                this.setState({imageWidh: width, imageHeight: height});
              }}
            /&gt;
          )}
        &lt;/View&gt;
      );
    }
  </code></pre>
  
  <p>The result I am getting is not satisfying as the drawn boxes are off:</p>
  
  <p><a href="https://i.stack.imgur.com/UcFau.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/UcFau.jpg" alt="box drawing on image result"></a> </p>
  
  <p>I need help for defining a better approach so that boxes are correctly positioned on the text elements</p>