Browse Source

Picking image from camera or gallery

master
analuizaff 4 years ago
parent
commit
3ebcaaa5de
  1. 81
      src/app/components/ImageInput.js
  2. 51
      src/app/components/LaunchCamera.js
  3. 1
      src/package.json

81
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,11 +50,25 @@ 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 (
<View>
<TouchableWithoutFeedback onPress={handlePress}>
<View style={styles.container}>
{!imageUri && (
@ -55,6 +81,24 @@ function ImageInput({ imageUri, onChangeImage }) {
{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>
</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;

51
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 (
<TouchableWithoutFeedback onPress={handlePress}>
<View style={styles.container}>
<Image style={styles.image} source={{ uri: image }} />
<View style={styles.row}>
<Button title="Camera" onPress={handlePress} />
</View>
{!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: {
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;

1
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",

Loading…
Cancel
Save