rn-crop

A React Native module that opens a native crop editor over an existing image and returns the cropped result — TOCropViewController on iOS, android-image-cropper on Android.

Requirements

| | Minimum | | --- | --- | | iOS | 15.1 — React Native's own minimum | | Android | API 24 (minSdkVersion, overridable from your root project) |

Installation

yarn add rn-crop

iOS

npx pod-install

No further setup is required — the crop editor works out of the box on both platforms.

Usage

import { openCropper } from 'rn-crop';

try {
  const image = await openCropper({
    path: 'file:///path/to/photo.jpg', // also accepts content://, ph://, and http(s):// sources
    aspectRatio: { width: 1, height: 1 }, // omit for freeform cropping
    width: 1000, // downscale the output to fit this box, preserving aspect ratio
    height: 1000,
    quality: 0.9,
  });

  console.log(image.uri, image.width, image.height);
} catch (error) {
  if (error.code === 'E_CROP_CANCELLED') {
    // user backed out of the crop editor
  } else {
    // error.code === 'E_CROP_ERROR'
  }
}

API

openCropper(options): Promise<CropResult>

options

| Key | Type | Description | | --- | --- | --- | | path | string | Required. Local file path, content:///ph:// asset URI, or a remote http(s):// URL of the image to crop. | | aspectRatio | {width: number, height: number} | Locks the crop box to this ratio, e.g. {width: 16, height: 9}. Omit for freeform cropping. | | width | number | Bounding box the cropped output is downscaled to fit, preserving aspect ratio. Never upscales. | | height | number | See width. | | quality | number | JPEG compression quality from 0 to 1. Defaults to 1. | | includeBase64 | boolean | Also returns the cropped image as a base64 string. Defaults to false. | | cropperToolbarTitle | string | Title shown in the crop editor's toolbar. Android only. |

CropResult

| Key | Type | Description | | --- | --- | --- | | uri | string | file:// URI of the cropped image. | | width | number | Width of the cropped image, in pixels. | | height | number | Height of the cropped image, in pixels. | | fileSize | number | Size of the cropped image, in bytes. | | fileName | string | Generated file name of the cropped image. | | mime | string | MIME type of the cropped image, e.g. image/jpeg. | | base64 | string? | Present when includeBase64 is true. |

Errors

The returned promise rejects with an Error whose .code is one of:

• E_CROP_CANCELLED — the user dismissed the crop editor without confirming.
• E_CROP_ERROR — any other failure (bad input, decode failure, I/O error).

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library