react-native-image-cropview v1.0.0

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

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

Response Object

Available Methods

For more advanced usage check our example app.