A super simple image cropping and rotation tool for Expo that runs on iOS, Android and Web!
 |
 |
 |
|---|
Check out the demo on Netlify here
To get started install the package in your Expo project by running:
yarn add expo-image-editor
or
npm i expo-image-editor
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.
// ...
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 (
<View>
<Image
style={{ height: 300, width: 300 }}
source={{ uri: imageData.uri }}
/>
<Button title="Select Photo" onPress={() => selectPhoto()} />
<ImageEditor
visible={editorVisible}
onCloseEditor={() => setEditorVisible(false)}
imageUri={imageUri}
fixedCropAspectRatio={16 / 9}
lockAspectRatio={aspectLock}
minimumCropDimensions={{
width: 100,
height: 100,
}}
onEditingComplete={(result) => {
setImageData(result);
}}
mode="full"
/>
</View>
);
}| 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 <View /> |
| 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 |