React Native Custom Crop 📐🖼

A component that allows you to perform custom crop and perspective correction !

Designed to work with React Native Document Scanner

https://github.com/Michaelvilleneuve/react-native-document-scanner

Installation 🚀🚀

$ npm install react-native-custom-crop --save

$ react-native link react-native-custom-crop

This library uses react-native-svg, you must link its content too.

$ react-native link react-native-custom-crop/node_modules/react-native-svg

Download opencv2.framework from here https://sourceforge.net/projects/opencvlibrary/files/opencv-ios/2.4.13/ and unzip it in your ios then in XCode, right click on project, choose add files to yourproject and select opencv2.framework

Crop image

• First get component ref

<CustomCrop ref={(ref) => this.customCrop = ref} />

• Then call :

this.customCrop.crop();

Props

Props	Type	Required	Description
updateImage	Func	Yes	Returns the cropped image and the coordinates of the cropped image in the initial photo
rectangleCoordinates	Object see usage	No	Object to predefine an area to crop (an already detected image for example)
initialImage	String	Yes	Base64 encoded image you want to be cropped
height	Number	Yes	Height of the image (will probably disappear in the future
width	Number	Yes	Width of the image (will probably disappear in the future
overlayColor	String	No	Color of the cropping area overlay
overlayStrokeColor	String	No	Color of the cropping area stroke
overlayStrokeWidth	Number	No	Width of the cropping area stroke
handlerColor	String	No	Color of the handlers

Usage

import CustomCrop from 'react-native-custom-crop';
 
class CropView extends Component {
  componentWillMount() {
    const image = 'base64ImageString';
    Image.getSize(image, (width, height) => {
      this.setState({
        imageWidth: width,
        imageHeight: height,
        initialImage: image,
        rectangleCoordinates: {
          topLeft: { x: 10, y: 10 },
          topRight: { x: 10, y: 10 },
          bottomRight: { x: 10, y: 10 },
          bottomLeft: { x: 10, y: 10 },
        },
      });
    });
  }
 
  updateImage(image, newCoordinates) {
    this.setState({
      image,
      rectangleCoordinates: newCoordinates
    });
  }
 
  crop() {
    this.customCrop.crop();
  }
 
  render() {
    return (
      <View>
        <CustomCrop
          updateImage={this.updateImage.bind(this)}
          rectangleCoordinates={this.state.rectangleCoordinates}
          initialImage={this.state.initialImage}
          height={this.state.imageHeight}
          width={this.state.imageWidth}
          ref={(ref) => this.customCrop = ref}
          overlayColor="rgba(18,190,210, 1)"
          overlayStrokeColor="rgba(20,190,210, 1)"
          handlerColor="rgba(20,150,160, 1)"
        />
        <TouchableOpacity onPress={this.crop.bind(this)}>
          <Text>CROP IMAGE</Text>
        </TouchableOpacity>
      </View>
    );
  }
}