react-native-image-crop

Image crop editor component for iOS and Android. Move the image in the area and crop it.

Installation

This component is dependent of react-native-image-resizer (See Github) which needs to be installed and linked to your project before.

If you don't have rnpm installed on your computer, install it first:

npm install -g rnpm

Then, install and link the peer dependency:

npm install --save react-native-image-resizer
rnpm link

Now you can install this component

npm install --save react-native-image-crop

Usage

Import the component into the file you want to use it:

import ImageCrop from 'react-native-image-crop';

Use the component directly in your code. The component will automatically fit the parent view.

<View>
	<ImageCrop
		ref={(c) => { this.imageCrop = c; }}
		cropWidth={500}
		cropHeight={500}
		image={{
			uri: 'https://c1.staticflickr.com/9/8073/28582653114_d154039cb9_k.jpg',
		}}
	/>
</View>

To crop the image, you can call the method crop() from the component

onButtonPress() {
	this.imageCrop.crop().then((uri) => {
	  // uri contains the cropped image
	});
}

Note: If you use a large image, you might need to preload it before using this component.

Properties

Property	Type	Description
image	ImageSource https://facebook.github.io/react-native/docs/image.html#source	Source of the image. This property is mandatory
containerPaddingLeft	Number	Apply padding on the left of the image Default: 20
containerPaddingRight	Number	Apply padding on the right of the image Default: 20
containerPaddingTop	Number	Apply padding at the top of the image Default: 20
containerPaddingBottom	Number	Apply padding at the bottom of the image Default: 20
cropWidth	Number	Enforce the cropped width of the image. This property must be used with cropHeight
cropHeight	Number	Enforce the cropped height of the image. This property must be used with cropWidth
cropQuality	Number	Image quality, from 0 to 100 Default: 80

Methods

Method	Description	Example
crop()	Crop and, if necessary, resize the image. This method returns a Promise.	this.imageCrop.crop().then((uri) => { this.setState({ uri })})

Todo

• Pinch and zoom. Add new properties defaultZoom, minZoom, maxZoom