react-native-image-cropview

A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

Android iOS

Getting started

$ npm install react-native-image-cropview --save

or

$ yarn add react-native-image-cropview

Additional steps

If you have react-native-gesture-handler installed ignore this step.

$ npm install react-native-gesture-handler --save

or

$ yarn add react-native-gesture-handler

IOS

No additional step is required.

Android

No additional step is required.

Usage

Import Cropper from react-native-image-cropview:

import { Cropper } from 'react-native-image-cropview';

Create state which will be used to keep the image uri or import from other source

const [imageUri, setImageUri] = useState();

Add Cropper like this:

{
  !!imageUri && (
    <Cropper
      uri={imageUri}
      onDone={onCropDone}
      onCancel={onCropCancel}
      onReset={onReset}
      getImageSize={getImageSize}
    />
  )
}

See Options for further information on options.

If you want to call done/cancel/reset programmatically, pass ref to Cropper:

const cropperRef = useRef();

function done() {
  cropperRef.current.done();
}

function cancel() {
  cropperRef.current.cancel();
}

function reset() {
  cropperRef.current.reset();
}

function getImageSize() {
  // Use any method to find the original image width and height
  return {
    width,
    height
  }
}

return (
  <Cropper
    ref={cropperRef}
    uri={imageUri}
    onDone={onCropDone}
    onCancel={onCropCancel}
    onReset={onReset}
    hideFooter={true}
    getImageSize={getImageSize}
  />
)

See Available Methods for further information.

Done callback will be called with a response object, refer to Response Object.

Options

Option Required Description
uri Yes Show the image specified by the URI param.
getImageSize Yes A method to provide the original image width and height to the cropper. Feel free to use any method to get the original image width and height; Example: https://www.npmjs.com/package/react-native-image-size
onDone No Callback invoked when cropping is done
onCancel No Callback invoked on cancel
onReset No Callback invoked on cropping reset
aspectRatio No The aspect ratio of cropping area: Example: original, 4/3, 2/3, 16/9 …
rounded No Use round cropping area
scaleMax No Maximum image scale of the image. Example: scaleMax={3} where scale scaleMax <= 20 and scaleMax >= 3
hideFooter No Hide all the cropper actions

Response Object

key Description
width width of cropping rectangle relative to the original image size
height height of cropping rectangle relative to the original image size
x x position of cropping rectangle relative to the original image size
y y position of cropping rectangle relative to the original image size

Available Methods

Method Description
done Programmatically call cropping done
cancel Programmatically call cancel
reset Programmatically call reset

For more advanced usage check our example app.

GitHub

View Github