1import { ImageEditor } from "expo-image-editor";
2
3function App() {
4 const [imageUri, setImageUri] = useState(undefined);
5
6 const [editorVisible, setEditorVisible] = useState(false);
7
8 const selectPhoto = async () => {
9 // Get the permission to access the camera roll
10 const response = await ImagePicker.requestCameraRollPermissionsAsync();
11 // If they said yes then launch the image picker
12 if (response.granted) {
13 const pickerResult = await ImagePicker.launchImageLibraryAsync();
14 // Check they didn't cancel the picking
15 if (!pickerResult.cancelled) {
16 launchEditor(pickerResult.uri);
17 }
18 } else {
19 // If not then alert the user they need to enable it
20 Alert.alert(
21 "Please enable camera roll permissions for this app in your settings."
22 );
23 }
24 };
25
26 const launchEditor = (uri: string) => {
27 // Then set the image uri
28 setImageUri(uri);
29 // And set the image editor to be visible
30 setEditorVisible(true);
31 };
32
33 return (
34 <View>
35 <Image
36 style={{ height: 300, width: 300 }}
37 source={{ uri: imageData.uri }}
38 />
39 <Button title="Select Photo" onPress={() => selectPhoto()} />
40 <ImageEditor
41 visible={editorVisible}
42 onCloseEditor={() => setEditorVisible(false)}
43 imageUri={imageUri}
44 fixedCropAspectRatio={16 / 9}
45 lockAspectRatio={aspectLock}
46 minimumCropDimensions={{
47 width: 100,
48 height: 100,
49 }}
50 onEditingComplete={(result) => {
51 setImageData(result);
52 }}
53 mode="full"
54 />
55 </View>
56 );
57}