image picker - modal

src/App.js

@@ -8,7 +8,6 @@ import openDatabase from "./app/database/database-connection";
 
 import initDatabase from "./app/database/database-init";
 import FlashMessage from "react-native-flash-message";
-import LaunchCamera from "./app/components/LaunchCamera";
 
 export default function App() {
   global.userDataBase = openDatabase();
@@ -19,6 +18,5 @@ export default function App() {
       <AppNavigator />
       <FlashMessage position="top" />
     </NavigationContainer>
-    /*<LaunchCamera/>*/
   );
 }

src/app/components/ImageInput.js

@@ -7,12 +7,10 @@ import {
   Alert,
   Text,
   Modal,
-  TouchableHighlight,
+  TouchableOpacity,
 } 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";
 
@@ -41,7 +39,7 @@ function ImageInput({ imageUri, onChangeImage }) {
       ]);
   };
 
-  const selectImage = async () => {
+  const launchImageLibrary = async () => {
     setModalVisible(false);
     try {
       const result = await ImagePicker.launchImageLibraryAsync({
@@ -54,7 +52,7 @@ function ImageInput({ imageUri, onChangeImage }) {
     }
   };
 
-  const takePicture = async () => {
+  const launchCamera = async () => {
     setModalVisible(false);
     try {
       const result = await ImagePicker.launchCameraAsync({
@@ -86,16 +84,29 @@ function ImageInput({ imageUri, onChangeImage }) {
         <Modal style={styles.centeredView}
           animationType="slide"
           transparent={true}
-          visible={modalVisible}
-          onRequestClose={() => {
-            Alert.alert('Modal has been closed.');
+          visible={modalVisible}>
+          <TouchableWithoutFeedback onPress={() => {
+            setModalVisible(!setModalVisible);
           }}>
             <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>
+                  <Text style={styles.modalLabel}>Selecione uma imagem</Text>
+                  <TouchableOpacity style={{ width: 300 }} onPress={launchCamera}>
+                    <Text style={styles.modalText}>Câmera</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity style={{ width: 300 }} onPress={launchImageLibrary}>
+                    <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' }}>
+                    Cancelar
+                </Text>
+                </TouchableOpacity>
               </View>
             </View>
+          </TouchableWithoutFeedback>
         </Modal>
       </View>
     </View>
@@ -125,22 +136,35 @@ const styles = StyleSheet.create({
   },
   modalView: {
     margin: 20,
-    backgroundColor: 'white',
+    backgroundColor: '#d3d3d3',
     borderRadius: 20,
-    padding: 35,
+    padding: 30,
     alignItems: 'center',
-    shadowColor: '#000',
+    shadowColor: 'grey',
     shadowOffset: {
-      width: 0,
+      width: 10,
       height: 2,
     },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
-    elevation: 5,
+    elevation: 25,
+    width: 300,
   },
   modalText: {
-    marginBottom: 15,
+    marginTop: 15,
     textAlign: 'center',
+    fontSize: 16,
+    color: colors.primary,
+  },
+  modalLabel: {
+    borderBottomWidth: 2,
+    borderBottomColor: colors.primary,
+    width: 300,
+    color: colors.primary,
+    fontSize: 18,
+    textAlign: "center",
+    fontWeight: "bold",
+    height: 35
   },
 });
 

src/app/components/LaunchCamera.js

@@ -1,57 +0,0 @@
-import React from "react";
-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 [imageUri, setImageUri] = useState(null);
-
-    const takePicture = async () => {
-        await Permissions.askAsync(Permissions.CAMERA);
-        const { cancelled, uri } = await ImagePicker.launchCameraAsync({
-            allowsEditing: false,
-        });
-        setImageUri(uri);
-    };
-
-    const handlePress = () => {
-        takePicture();
-    };
-
-    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>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        alignItems: "center",
-        backgroundColor: colors.light,
-        borderRadius: 15,
-        height: 100,
-        justifyContent: "center",
-        marginVertical: 10,
-        overflow: "hidden",
-        width: 100,
-    },
-    image: {
-        height: "100%",
-        width: "100%",
-    },
-});
-
-export default LaunchCamera;