Image Editor Native module for React Native.
Originally extracted from React Native issue#23313 and maintained by the community.
Screenshot from the example app. The crop UI is example code, not part of this library, which provides only ImageEditor.cropImage().
Starting from v5, this library supports only the New Architecture (TurboModules). The Old Architecture is no longer supported.
| Library version | React Native version | Architecture |
|---|---|---|
| 5.x | >= 0.77 | New only |
| 4.x | >= 0.57 | Old and New |
Note
React Native 0.76+ enables the New Architecture by default. On React Native 0.74 and 0.75 you must enable it manually: set newArchEnabled=true in android/gradle.properties, and install pods with RCT_NEW_ARCH_ENABLED=1 npx pod-install.
If your app still uses the Old Architecture, stay on v4.
yarn add @react-native-community/image-editor
# or
npm install @react-native-community/image-editor --savenpx pod-installStart by importing the library:
import ImageEditor from '@react-native-community/image-editor';Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the promise will be rejected.
If the cropping process is successful, the resultant cropped image will be stored in the cache path, and the CropResult returned in the promise will point to the image in the cache path.
ImageEditor.cropImage(uri, cropData).then((result) => {
console.log('Cropped image uri:', result.uri);
});| Name | Type | Description |
|---|---|---|
offset |
{ x: number, y: number } |
The top-left corner of the cropped image, specified in the original image's coordinate space |
size |
{ width: number, height: number } |
Size (dimensions) of the cropped image |
displaySize(optional) |
{ width: number, height: number } |
Size to which you want to scale the cropped image |
resizeMode(optional) |
'contain' | 'cover' | 'stretch' | 'center' |
Resizing mode to use when scaling the image (iOS only, Android resize mode is always 'cover', Web - no support) Default value: 'cover' |
quality(optional) |
number |
A value in range 0.0 - 1.0 specifying compression level of the result image. 1 means no compression (highest quality) and 0 the highest compression (lowest quality) Default value: 0.9 |
format(optional) |
'jpeg' | 'png' | 'webp' |
The format of the resulting image. Default value: based on the provided image; if value determination is not possible, 'jpeg' will be used as a fallback.'webp' isn't supported by iOS. |
includeBase64(optional) |
boolean |
Indicates if Base64 formatted picture data should also be included in the CropResult. Default value: false |
headers(optional) |
object | Headers |
An object or Headers interface representing the HTTP headers to send along with the request for a remote image. |
| Name | Type | Description |
|---|---|---|
uri |
string |
The path to the image file (example: 'file:///data/user/0/.../image.jpg')WEB: uri is the data URI string (example 'data:image/jpeg;base64,/4AAQ...AQABAA') |
path |
string |
The URI of the image (example: '/data/user/0/.../image.jpg')WEB: path is the blob URL (example 'blob:https://example.com/43ff7a16...e46b1') |
name |
string |
The name of the image file. (example: 'image.jpg') |
width |
number |
The width of the image in pixels |
height |
number |
Height of the image in pixels |
size |
number |
The size of the image in bytes |
type |
string |
The MIME type of the image ('image/jpeg', 'image/png', 'image/webp') |
base64(optional) |
string |
The base64-encoded image data example: '/9j/4AAQSkZJRgABAQAAAQABAAD'if you need data URI as the source for an Image element for example, you can use data:${type};base64,${base64} |
The example app shows every cropImage option, plus a cache lab for Image.prefetch / <Image> cache reuse. See its README for how to run it.
Note
The example UI (crop box, controls, result view) is not part of this library. It's example code built with plain React Native. The library itself only provides ImageEditor.cropImage().