# expo-image-editor
> A super simple image cropping and rotation tool for Expo that runs on iOS, Android and Web!
Latest version **1.7.1** (published 2021-10-18) · MIT license · 0 weekly downloads
## Install
```sh
npm install expo-image-editor
pnpm add expo-image-editor
yarn add expo-image-editor
bun add expo-image-editor
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.7.1 |
| Published | 2021-10-18 |
| First published | 2020-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 412.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 160 |
| Author | Thomas Coldwell |
| Maintainers | thomas-coldwell |
| Keywords | react, react-native, image, image editor, image cropping, blur, expo |
## Links
- npm: https://www.npmjs.com/package/expo-image-editor
- Repository: https://github.com/thomas-coldwell/expo-image-editor
- Issues: https://github.com/thomas-coldwell/expo-image-editor/issues
- npm.io page: https://npm.io/package/expo-image-editor
## Dependencies (4)
- [no-scroll](https://npm.io/package/no-scroll.md) ^2.1.1
- [@react-hook/throttle](https://npm.io/package/@react-hook/throttle.md) ^2.2.0
- [modal-enhanced-react-native-web](https://npm.io/package/modal-enhanced-react-native-web.md) ^0.2.0
- [@miblanchard/react-native-slider](https://npm.io/package/@miblanchard/react-native-slider.md) ^1.5.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.7.1 (latest) — 2021-10-18
- 1.7.0 — 2021-10-12
- 1.6.3 — 2021-08-05
- 1.6.2 — 2021-07-28
- 1.6.0 — 2021-07-28
- 1.5.1 — 2021-05-06
- 1.5.0 — 2021-05-06
- 1.4.3 — 2020-10-14
- 1.4.2 — 2020-10-13
- 1.4.1 — 2020-10-13
- 1.4.0 — 2020-10-13
- 1.3.0 — 2020-09-12
- 1.2.0 — 2020-09-09
- 1.0.1 — 2020-08-17
- 1.0.0 — 2020-07-11
## README
# 🌁 Expo Image Editor
A super simple image cropping and rotation tool for Expo that runs on iOS, Android and Web!
|  |  |  |
| ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
Check out the demo on Netlify here
## Installation
To get started install the package in your Expo project by running:
```
yarn add expo-image-editor
```
or
```
npm i expo-image-editor
```
## Usage
The package exports a single component `ImageEditor` that can be placed anywhere in your project. This renders a modal that then returns the editing result when it is dismissed.
```typescript
// ...
import { ImageEditor } from "expo-image-editor";
function App() {
const [imageUri, setImageUri] = useState(undefined);
const [editorVisible, setEditorVisible] = useState(false);
const selectPhoto = async () => {
// Get the permission to access the camera roll
const response = await ImagePicker.requestCameraRollPermissionsAsync();
// If they said yes then launch the image picker
if (response.granted) {
const pickerResult = await ImagePicker.launchImageLibraryAsync();
// Check they didn't cancel the picking
if (!pickerResult.cancelled) {
launchEditor(pickerResult.uri);
}
} else {
// If not then alert the user they need to enable it
Alert.alert(
"Please enable camera roll permissions for this app in your settings."
);
}
};
const launchEditor = (uri: string) => {
// Then set the image uri
setImageUri(uri);
// And set the image editor to be visible
setEditorVisible(true);
};
return (
);
}
```
### Props
| Name | Type | Description |
| --------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| visible | boolean | Whether the editor should be visible or not. |
| asView | boolean | If `true` this will remove the modal wrapper and return the image editor in a regular `` |
| mode | string | Which mode to use the editor in can be either `full` or `crop-only`. |
| onCloseEditor | function | Callback when the editor is dimissed - use this to set hide the editor. |
| imageUri | string | The uri of the image to be edited |
| fixedCropAspectRatio | number | The starting aspect ratio of the cropping window. |
| lockAspectRatio | boolean | Whether the cropping window should maintain this aspect ratio or not. |
| minimumCropDimensions | object | An object of `{width, height}` specifying the minimum dimensions of the crop window. |
| onEditingComplete | function | function that will return the result of the image editing which is an object identical to `imageData` |
| throttleBlur | boolean | Whether to throttle the WebGL update of the blur while adjusting (defaults to false) - useful to set to true on lower performance devices |
| allowedTransformOperations | string[] | Which transform operations you want to exclusively allow to be used. Can include `crop` and `rotate` e.g. `['crop']` to only allow cropping |
| allowedAdjustmentOperations | string[] | Which image adjustment operations you want to exclusively allow to be used. Only `blur` can be specified at the minute e.g. `['blur']` yo only allow blur as an image adjustment |
---
_Source: https://npm.io/package/expo-image-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._