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}
        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