react-native-image-cropview

@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.