Skip to content

alexmngn/react-native-image-crop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-image-crop

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

Demo

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}
		source={{
			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
source 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