diff --git a/src/app/components/ImageInput.js b/src/app/components/ImageInput.js
index 6c1d674..689135c 100644
--- a/src/app/components/ImageInput.js
+++ b/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 (
-
-
- {!imageUri && (
-
- )}
- {imageUri && }
+
+
+
+ {!imageUri && (
+
+ )}
+ {imageUri && }
+
+
+
+
+ {
+ Alert.alert('Modal has been closed.');
+ }}>
+
+
+ Câmera
+ Galeria
+
+
+
-
+
);
}
@@ -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;
diff --git a/src/app/components/LaunchCamera.js b/src/app/components/LaunchCamera.js
index d7bb02c..c9b8072 100644
--- a/src/app/components/LaunchCamera.js
+++ b/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 (
-
-
-
-
+
+
+ {!imageUri && (
+
+ )}
+ {imageUri && }
-
+
);
}
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;
\ No newline at end of file
diff --git a/src/package.json b/src/package.json
index a8db13a..9e789bc 100644
--- a/src/package.json
+++ b/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",