How to draw rectangles in an image in React native

Question

I've been looking for references for some time on how to draw rectangles in an image using react native, but I find nothing.

What I try to do is something like passing as parameters a function, a photograph, and coordinates of the vertices of the diagonal of a rectangle, then returning an image with that drawn rectangle. How could I do that?

Example

Answer 1

Think simple.. just like create div with background colour. Here is example:

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.rectangle}></View>
        <Image source={require('assets/snack-icon.png')} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    position: 'relative',
  },
  rectangle: {
    height: 128,
    width: 128,
    backgroundColor: 'salmon',
    position: 'absolute', 
    zIndex: 99,
    top: '50%',
    left: '40%'
  },

});

Result:

Answer 2

Create a view with Image and View(Rectangle box) as children.Place the rectangle box on Image by setting position absolute to the rectangle.To position you have to set rectangle style values for top, bottom, left and right.I have created a function to pass position values.

Check this example:

import * as React from "react";
import { Text, View, StyleSheet, Image } from "react-native";

export default class App extends React.Component {
  renderImage = (topPosition, bottomPosition, leftPosition, rightPosition) => {
    return (
      <View style={styles.imageContainer}>
        <Image
          source={{
            uri:
              "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzwZW9gvrxF2McRF-wP5TxCIBU_3fA2XDl9DESsm1uqowjSvZ1"
          }}
          style={styles.image}
          resizeMode="stretch"
        />
        <View
          style={[
            styles.rectangle,
            {
              top: topPosition,
              bottom: bottomPosition,
              left: leftPosition,
              right: rightPosition
            }
          ]}
        />
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>{this.renderImage(80, 55, 30, 70)}</View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  imageContainer: {
    width: 300,
    height: 250,
    alignSelf: "center"
  },
  image: {
    width: 300,
    height: 250
  },
  rectangle: {
    borderWidth: 3,
    borderColor: "red",
    position: "absolute"
  }
});