Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thomas-coldwell/expo-image-editor
A super simple image cropping and rotation tool for Expo that runs on iOS, Android and Web!
https://github.com/thomas-coldwell/expo-image-editor
expo react-native react-native-web
Last synced: about 2 months ago
JSON representation
A super simple image cropping and rotation tool for Expo that runs on iOS, Android and Web!
- Host: GitHub
- URL: https://github.com/thomas-coldwell/expo-image-editor
- Owner: thomas-coldwell
- Archived: true
- Created: 2020-05-23T16:08:51.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-10T14:10:51.000Z (8 months ago)
- Last Synced: 2024-11-07T21:16:22.946Z (about 2 months ago)
- Topics: expo, react-native, react-native-web
- Language: TypeScript
- Homepage:
- Size: 2.35 MB
- Stars: 164
- Watchers: 4
- Forks: 33
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-list - expo-image-editor - coldwell | 79 | (JavaScript)
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 (
selectPhoto()} />
setEditorVisible(false)}
imageUri={imageUri}
fixedCropAspectRatio={16 / 9}
lockAspectRatio={aspectLock}
minimumCropDimensions={{
width: 100,
height: 100,
}}
onEditingComplete={(result) => {
setImageData(result);
}}
mode="full"
/>
);
}
```
### 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 |