Fixing ImageInput error on IOS.

src/app/components/ImageInput.js

@@ -14,65 +14,72 @@ import * as ImagePicker from "expo-image-picker";
 import * as Permissions from "expo-permissions";
 import colors from "../config/colors";
 
-function ImageInput({ imageUri, onChangeImage }) {
-  useEffect(() => {
-    requestPermission();
-    //requestPermissionCamera();
-  }, []);
- /* const [modalVisible, setModalVisible] = useState(false);
+const requestPermissionCamera = async () => {
+  const { granted } = await Permissions.askAsync(Permissions.CAMERA);
+  if (!granted)
+    alert("Você precisa habilitar permissão para acessar a câmera.");
 
- const requestPermissionCamera = async () => {
-    const { granted } = await Permissions.askAsync(Permissions.CAMERA);
-    if(granted) {
-      launchCamera();
-    }
-    else if (!granted) alert("Você precisa habilitar permissão para acessar a câmera.");
-  };
-  
-  const launchCamera = async () => {
-    setModalVisible(false);
-    try {
-      const result = await ImagePicker.launchCameraAsync({
-        allowsEditing: false,
-      });
-      if (!result.cancelled) onChangeImage(result.uri)
-    } catch (error) {
-      console.log("Erro ao ler imagem", error);
-    }
-  };*/
+  return granted;
+};
+
+const requestPermissionGallery = async () => {
+  const { granted } = await ImagePicker.requestCameraRollPermissionsAsync();
+  if (!granted)
+    alert("Você precisa habilitar permissão para acessar a biblioteca.");
 
-  const requestPermission = async () => {
-    const { granted } = await ImagePicker.requestCameraRollPermissionsAsync();
-    if (!granted)
-      alert("Você precisa habilitar permissão para acessar a biblioteca.");
-  };
+  return granted;
+};
 
-  const handlePress = () => {
-    if (!imageUri) 
-      launchImageLibrary();
-      //setModalVisible(true);
-    else
-      Alert.alert("Deletar", "Deseja deletar esta imagem?", [
-        { text: "Sim", onPress: () => onChangeImage(null) },
-        { text: "Não" },
-      ]);
-  };
+const removeImgage = (imageUri, onChangeImage) => {
+  if (imageUri) {
+    Alert.alert("Deletar", "Deseja deletar esta imagem?", [
+      { text: "Sim", onPress: () => onChangeImage(null) },
+      { text: "Não" },
+    ]);
+  }
+};
 
-  const launchImageLibrary = async () => {
-    try {
-      const result = await ImagePicker.launchImageLibraryAsync({
-        mediaTypes: ImagePicker.MediaTypeOptions.Images,
-        quality: 0.5,
-      });
-      if (!result.cancelled) onChangeImage(result.uri);
-    } catch (error) {
-      console.log("Erro ao ler imagem", error);
+const launchCamera = async (onChangeImage, callBack) => {
+  try {
+    const result = await ImagePicker.launchCameraAsync({
+      allowsEditing: false,
+    });
+    if (!result.cancelled) {
+      onChangeImage(result.uri);
     }
-  };
+    callBack();
+  } catch (error) {
+    console.log("Erro ao ler imagem", error);
+  }
+};
+
+const launchImageLibrary = async (onChangeImage, callBack) => {
+  try {
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      quality: 0.5,
+    });
+    if (!result.cancelled) {
+      onChangeImage(result.uri);
+    }
+    callBack();
+  } catch (error) {
+    console.log("Erro ao ler imagem", error);
+  }
+};
+
+function ImageInput({ imageUri, onChangeImage }) {
+  const [modalVisible, setModalVisible] = useState(false);
 
   return (
     <View>
-      <TouchableWithoutFeedback onPress={handlePress}>
+      <TouchableWithoutFeedback
+        onPress={() => {
+          !imageUri
+            ? setModalVisible(true)
+            : removeImgage(imageUri, onChangeImage);
+        }}
+      >
         <View style={styles.container}>
           {!imageUri && (
             <MaterialCommunityIcons
@@ -81,43 +88,79 @@ function ImageInput({ imageUri, onChangeImage }) {
               size={40}
             />
           )}
-          {imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
+          {imageUri && (
+            <Image source={{ uri: imageUri }} style={styles.image} />
+          )}
         </View>
       </TouchableWithoutFeedback>
-     {/*<View >
-        <Modal style={styles.centeredView}
+      <View>
+        <Modal
+          style={styles.centeredView}
           animationType="slide"
           transparent={true}
-          visible={modalVisible}>
-          <TouchableWithoutFeedback onPress={() => {
-            setModalVisible(!setModalVisible);
-          }}>
+          visible={modalVisible}
+        >
+          <TouchableWithoutFeedback
+            onPress={() => {
+              setModalVisible(!modalVisible);
+            }}
+          >
             <View style={styles.centeredView}>
               <View style={styles.modalView}>
                 <View>
                   <Text style={styles.modalLabel}>Selecione uma imagem</Text>
-                  <TouchableOpacity style={{ width: 300 }} onPress={requestPermissionCamera}>
+
+                  <TouchableOpacity
+                    style={{ width: 300 }}
+                    onPress={() => {
+                      requestPermissionCamera() &&
+                        launchCamera(onChangeImage, () =>
+                          setModalVisible(false)
+                        );
+                    }}
+                  >
                     <Text style={styles.modalText}>Câmera</Text>
                   </TouchableOpacity>
-                  <TouchableOpacity style={{ width: 300 }} onPress={launchImageLibrary}>
+
+                  <TouchableOpacity
+                    style={{ width: 300 }}
+                    onPress={() => {
+                      requestPermissionGallery() &&
+                        launchImageLibrary(onChangeImage, () =>
+                          setModalVisible(false)
+                        );
+                    }}
+                  >
                     <Text style={styles.modalText}>Galeria</Text>
                   </TouchableOpacity>
                 </View>
-                <TouchableOpacity style={{ width: 300 }} onPress={() => { setModalVisible(false) }}>
-                  <Text style={{ fontWeight: 'bold', marginTop: 20, fontSize: 14, textAlign: 'center' }}>
+
+                <TouchableOpacity
+                  style={{ width: 300 }}
+                  onPress={() => {
+                    setModalVisible(false);
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontWeight: "bold",
+                      marginTop: 20,
+                      fontSize: 14,
+                      textAlign: "center",
+                    }}
+                  >
                     Cancelar
-                </Text>
+                  </Text>
                 </TouchableOpacity>
               </View>
             </View>
           </TouchableWithoutFeedback>
         </Modal>
-      </View>*/}    
       </View>
+    </View>
   );
 }
 
-
 const styles = StyleSheet.create({
   container: {
     alignItems: "center",