Picking image from camera or gallery

src/app/components/ImageInput.js

@@ -5,32 +5,44 @@ import {
   Image,
   TouchableWithoutFeedback,
   Alert,
+  Text,
+  Modal,
+  TouchableHighlight,
 } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import * as ImagePicker from "expo-image-picker";
+import { Dialog } from 'react-native-simple-dialogs';
 
 import colors from "../config/colors";
+import { useState } from "react/cjs/react.development";
 
 function ImageInput({ imageUri, onChangeImage }) {
   useEffect(() => {
     requestPermission();
+    requestPermissionCamera();
   }, []);
+  const [modalVisible, setModalVisible] = useState(false);
 
   const requestPermission = async () => {
     const { granted } = await ImagePicker.requestCameraRollPermissionsAsync();
-    if (!granted) alert("You need to enable permission to access the library.");
+    if (!granted) alert("Você precisa habilitar permissão para acessar a biblioteca.");
+  };
+  const requestPermissionCamera = async () => {
+    const { granted } = await ImagePicker.requestCameraPermissionsAsync();
+    if (!granted) alert("Você precisa habilitar permissão para acessar a câmera.");
   };
 
   const handlePress = () => {
-    if (!imageUri) selectImage();
+    if (!imageUri) setModalVisible(true);
     else
-      Alert.alert("Delete", "Are you sure you want to delete this image?", [
-        { text: "Yes", onPress: () => onChangeImage(null) },
-        { text: "No" },
+      Alert.alert("Deletar", "Deseja deletar esta imagem?", [
+        { text: "Sim", onPress: () => onChangeImage(null) },
+        { text: "Não" },
       ]);
   };
 
   const selectImage = async () => {
+    setModalVisible(false);
     try {
       const result = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.Images,
@@ -38,23 +50,55 @@ function ImageInput({ imageUri, onChangeImage }) {
       });
       if (!result.cancelled) onChangeImage(result.uri);
     } catch (error) {
-      console.log("Error reading an image", error);
+      console.log("Erro ao ler imagem", error);
+    }
+  };
+
+  const takePicture = 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 (
-    <TouchableWithoutFeedback onPress={handlePress}>
-      <View style={styles.container}>
-        {!imageUri && (
-          <MaterialCommunityIcons
-            color={colors.medium}
-            name="camera-plus"
-            size={40}
-          />
-        )}
-        {imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
+    <View>
+      <TouchableWithoutFeedback onPress={handlePress}>
+        <View style={styles.container}>
+          {!imageUri && (
+            <MaterialCommunityIcons
+              color={colors.medium}
+              name="camera-plus"
+              size={40}
+            />
+          )}
+          {imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
+        </View>
+      </TouchableWithoutFeedback>
+
+      <View >
+        <Modal style={styles.centeredView}
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            Alert.alert('Modal has been closed.');
+          }}>
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.modalText}  onPress = {takePicture}>Câmera</Text>
+              <Text style={styles.modalText}  onPress = {selectImage}>Galeria</Text>
+            </View>
+          </View>
+        </Modal>
       </View>
-    </TouchableWithoutFeedback>
+    </View>
   );
 }
 
@@ -73,6 +117,31 @@ const styles = StyleSheet.create({
     height: "100%",
     width: "100%",
   },
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 22,
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
 });
 
 export default ImageInput;

src/app/components/LaunchCamera.js

@@ -1,17 +1,20 @@
 import React from "react";
-import { StyleSheet, Text, View, SafeAreaView, Image, Button } from "react-native";
+import { StyleSheet, Text, View, SafeAreaView, Image, Button, TouchableWithoutFeedback } from "react-native";
 import * as ImagePicker from "expo-image-picker";
 import { useState, useEffect } from "react";
 import * as Permissions from 'expo-permissions';
+import colors from "../config/colors";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
 function LaunchCamera() {
-    const [image, setImage] = useState();
+    const [imageUri, setImageUri] = useState(null);
 
     const takePicture = async () => {
         await Permissions.askAsync(Permissions.CAMERA);
         const { cancelled, uri } = await ImagePicker.launchCameraAsync({
             allowsEditing: false,
         });
-        setImage({ image: uri });
+        setImageUri(uri);
     };
 
     const handlePress = () => {
@@ -19,36 +22,36 @@ function LaunchCamera() {
     };
 
     return (
-        <View style={styles.container}>
-            <Image style={styles.image} source={{ uri: image }} />
-            <View style={styles.row}>
-                <Button title="Camera" onPress={handlePress} />
+        <TouchableWithoutFeedback onPress={handlePress}>
+            <View style={styles.container}>
+                {!imageUri && (
+                    <MaterialCommunityIcons
+                        color={colors.medium}
+                        name="camera-plus"
+                        size={40}
+                    />
+                )}
+                {imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
             </View>
-        </View>
+        </TouchableWithoutFeedback>
     );
 }
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
-        backgroundColor: '#ffffff',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    text: {
-        fontSize: 21,
-    },
-    row: {
-        flexDirection: 'row'
+        alignItems: "center",
+        backgroundColor: colors.light,
+        borderRadius: 15,
+        height: 100,
+        justifyContent: "center",
+        marginVertical: 10,
+        overflow: "hidden",
+        width: 100,
     },
     image: {
-        width: 300, height: 300, backgroundColor: 'gray'
-    },
-    button: {
-        padding: 13,
-        margin: 15,
-        backgroundColor: '#dddddd',
+        height: "100%",
+        width: "100%",
     },
-})
+});
 
 export default LaunchCamera;

src/package.json

@@ -33,6 +33,7 @@
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.4",
     "react-native-screens": "~2.10.1",
+    "react-native-simple-dialogs": "^1.4.0",
     "react-native-svg": "12.1.0",
     "react-native-web": "~0.13.12",
     "react-navigation": "^4.4.3",