Browse Source

last stable version - ImagePicker

master
analuizaff 4 years ago
parent
commit
ba54c24674
  1. 70
      src/app/components/ImageInput.js

70
src/app/components/ImageInput.js

@ -19,13 +19,8 @@ function ImageInput({ imageUri, onChangeImage }) {
requestPermission(); requestPermission();
//requestPermissionCamera(); //requestPermissionCamera();
}, []); }, []);
const [modalVisible, setModalVisible] = useState(false);
const requestPermission = async () => {
const { granted } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (!granted) alert("Você precisa habilitar permissão para acessar a biblioteca.");
};
const requestPermissionCamera = async () => {
/* const requestPermissionCamera = async () => {
const { granted } = await Permissions.askAsync(Permissions.CAMERA); const { granted } = await Permissions.askAsync(Permissions.CAMERA);
if(granted) { if(granted) {
launchCamera(); launchCamera();
@ -33,8 +28,25 @@ function ImageInput({ imageUri, onChangeImage }) {
else if (!granted) alert("Você precisa habilitar permissão para acessar a câmera."); 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);
}
};*/
const requestPermission = async () => {
const { granted } = await ImagePicker.requestCameraRollPermissionsAsync();
if (!granted) alert("Você precisa habilitar permissão para acessar a biblioteca.");
};
const handlePress = () => { const handlePress = () => {
if (!imageUri) setModalVisible(true);
if (!imageUri) launchImageLibrary();
else else
Alert.alert("Deletar", "Deseja deletar esta imagem?", [ Alert.alert("Deletar", "Deseja deletar esta imagem?", [
{ text: "Sim", onPress: () => onChangeImage(null) }, { text: "Sim", onPress: () => onChangeImage(null) },
@ -43,7 +55,6 @@ function ImageInput({ imageUri, onChangeImage }) {
}; };
const launchImageLibrary = async () => { const launchImageLibrary = async () => {
setModalVisible(false);
try { try {
const result = await ImagePicker.launchImageLibraryAsync({ const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images, mediaTypes: ImagePicker.MediaTypeOptions.Images,
@ -55,19 +66,6 @@ function ImageInput({ imageUri, onChangeImage }) {
} }
}; };
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 ( return (
<View> <View>
<TouchableWithoutFeedback onPress={handlePress}> <TouchableWithoutFeedback onPress={handlePress}>
@ -82,36 +80,6 @@ function ImageInput({ imageUri, onChangeImage }) {
{imageUri && <Image source={{ uri: imageUri }} style={styles.image} />} {imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
<View >
<Modal style={styles.centeredView}
animationType="slide"
transparent={true}
visible={modalVisible}>
<TouchableWithoutFeedback onPress={() => {
setModalVisible(!setModalVisible);
}}>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<View>
<Text style={styles.modalLabel}>Selecione uma imagem</Text>
<TouchableOpacity style={{ width: 300 }} onPress={requestPermissionCamera}>
<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> </View>
); );
} }

Loading…
Cancel
Save