expo image editor

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}