# @react-native-community/image-editor
> React Native Image Editing native modules for iOS & Android
Latest version **4.3.1** (published 2026-09-12) · MIT license · 0 weekly downloads
## Install
```sh
npm install @react-native-community/image-editor
pnpm add @react-native-community/image-editor
yarn add @react-native-community/image-editor
bun add @react-native-community/image-editor
```
## Health
**Score 65/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 4.3.1 |
| Published | 2026-09-12 |
| First published | 2019-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 96.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 448 |
| Author | Dawid Urbaniak |
| Maintainers | mateusz1913, retyui |
| Keywords | react-native, ios, android, react native, image editor, imageeditor, image |
## Links
- npm: https://www.npmjs.com/package/@react-native-community/image-editor
- Repository: https://github.com/callstack/react-native-image-editor
- Homepage: https://github.com/callstack/react-native-image-editor#readme
- Issues: https://github.com/callstack/react-native-image-editor/issues
- npm.io page: https://npm.io/package/@react-native-community/image-editor
## Alternatives
- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads
## Recent versions
- 4.3.1 (latest) — 2026-09-12
- 2.0.0-alpha.0 (alpha) — 2019-06-12
- 4.3.0 — 2025-01-22
- 4.2.1 — 2024-08-20
- 4.2.0 — 2024-03-22
- 4.1.0 — 2024-03-08
- 4.0.0 — 2024-02-25
- 3.2.0 — 2024-02-05
- 3.1.1 — 2024-01-21
- 3.1.0 — 2024-01-19
- 3.0.0 — 2023-12-24
- 2.3.0 — 2020-03-30
- 2.2.0 — 2019-11-19
- 2.1.0 — 2019-10-21
- 2.0.2 — 2019-09-06
- … 8 more at https://npm.io/package/@react-native-community/image-editor/versions
## README
# @react-native-community/image-editor
[![Build Status][build-badge]][build]
[![Version][version-badge]][package]
[![MIT License][license-badge]][license]
[![PRs Welcome][prs-welcome-badge]][prs-welcome]
[![Lean Core Badge][lean-core-badge]][lean-core-issue]
Image Editor Native module for React Native.
Originally extracted from React Native [`issue#23313`](https://github.com/facebook/react-native/issues/23313) and maintained by the community.
## Getting started
### Install
```shell
yarn add @react-native-community/image-editor
# or
npm install @react-native-community/image-editor --save
```
### Install Pods
```shell
npx pod-install
```
## Usage
Start by importing the library:
```ts
import ImageEditor from '@react-native-community/image-editor';
```
### Crop image
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`](#result-cropresult) returned in the promise will point to the image in the cache path. ⚠️ Remember to delete the cropped image from the cache path when you are done with it.
```ts
ImageEditor.cropImage(uri, cropData).then((result) => {
console.log('Cropped image uri:', result.uri);
});
```
### `cropData: ImageCropData`
| 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`](#result-cropresult).
**Default value**: `false` |
| `headers`
_(optional)_ | `object \| Headers` | An object or [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) interface representing the HTTP headers to send along with the request for a remote image. |
### `result: CropResult`
| 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}` |
For more advanced usage check our [example app](/example/src/App.tsx).
[build-badge]: https://github.com/callstack/react-native-image-editor/actions/workflows/main.yml/badge.svg
[build]: https://github.com/callstack/react-native-image-editor/actions/workflows/main.yml
[version-badge]: https://img.shields.io/npm/v/@react-native-community/image-editor.svg
[package]: https://www.npmjs.com/package/@react-native-community/image-editor
[license-badge]: https://img.shields.io/npm/l/@react-native-community/image-editor.svg
[license]: https://opensource.org/licenses/MIT
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
[prs-welcome]: http://makeapullrequest.com
[lean-core-badge]: https://img.shields.io/badge/Lean%20Core-Extracted-brightgreen.svg
[lean-core-issue]: https://github.com/facebook/react-native/issues/23313
---
_Source: https://npm.io/package/@react-native-community/image-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._