Browse Source

Fixing ImageInput error on IOS.

master
GabrielTrettel 4 years ago
parent
commit
a0115e35ed
  1. 133
      src/app/components/ImageInput.js

133
src/app/components/ImageInput.js

@ -14,65 +14,72 @@ import * as ImagePicker from "expo-image-picker";
import * as Permissions from "expo-permissions"; import * as Permissions from "expo-permissions";
import colors from "../config/colors"; import colors from "../config/colors";
function ImageInput({ imageUri, onChangeImage }) {
useEffect(() => {
requestPermission();
//requestPermissionCamera();
}, []);
/* const [modalVisible, setModalVisible] = useState(false);
const requestPermissionCamera = async () => { const requestPermissionCamera = async () => {
const { granted } = await Permissions.askAsync(Permissions.CAMERA); const { granted } = await Permissions.askAsync(Permissions.CAMERA);
if(granted) {
launchCamera();
}
else if (!granted) alert("Você precisa habilitar permissão para acessar a câmera.");
};
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);
}
};*/
return granted;
};
const requestPermission = async () => {
const requestPermissionGallery = async () => {
const { granted } = await ImagePicker.requestCameraRollPermissionsAsync(); const { granted } = await ImagePicker.requestCameraRollPermissionsAsync();
if (!granted) if (!granted)
alert("Você precisa habilitar permissão para acessar a biblioteca."); alert("Você precisa habilitar permissão para acessar a biblioteca.");
return granted;
}; };
const handlePress = () => {
if (!imageUri)
launchImageLibrary();
//setModalVisible(true);
else
const removeImgage = (imageUri, onChangeImage) => {
if (imageUri) {
Alert.alert("Deletar", "Deseja deletar esta imagem?", [ Alert.alert("Deletar", "Deseja deletar esta imagem?", [
{ text: "Sim", onPress: () => onChangeImage(null) }, { text: "Sim", onPress: () => onChangeImage(null) },
{ text: "Não" }, { text: "Não" },
]); ]);
}
}; };
const launchImageLibrary = async () => {
const launchCamera = async (onChangeImage, callBack) => {
try {
const result = await ImagePicker.launchCameraAsync({
allowsEditing: false,
});
if (!result.cancelled) {
onChangeImage(result.uri);
}
callBack();
} catch (error) {
console.log("Erro ao ler imagem", error);
}
};
const launchImageLibrary = async (onChangeImage, callBack) => {
try { try {
const result = await ImagePicker.launchImageLibraryAsync({ const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images, mediaTypes: ImagePicker.MediaTypeOptions.Images,
quality: 0.5, quality: 0.5,
}); });
if (!result.cancelled) onChangeImage(result.uri);
if (!result.cancelled) {
onChangeImage(result.uri);
}
callBack();
} catch (error) { } catch (error) {
console.log("Erro ao ler imagem", error); console.log("Erro ao ler imagem", error);
} }
}; };
function ImageInput({ imageUri, onChangeImage }) {
const [modalVisible, setModalVisible] = useState(false);
return ( return (
<View> <View>
<TouchableWithoutFeedback onPress={handlePress}>
<TouchableWithoutFeedback
onPress={() => {
!imageUri
? setModalVisible(true)
: removeImgage(imageUri, onChangeImage);
}}
>
<View style={styles.container}> <View style={styles.container}>
{!imageUri && ( {!imageUri && (
<MaterialCommunityIcons <MaterialCommunityIcons
@ -81,30 +88,67 @@ function ImageInput({ imageUri, onChangeImage }) {
size={40} size={40}
/> />
)} )}
{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}
<View>
<Modal
style={styles.centeredView}
animationType="slide" animationType="slide"
transparent={true} transparent={true}
visible={modalVisible}>
<TouchableWithoutFeedback onPress={() => {
setModalVisible(!setModalVisible);
}}>
visible={modalVisible}
>
<TouchableWithoutFeedback
onPress={() => {
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}> <View style={styles.centeredView}>
<View style={styles.modalView}> <View style={styles.modalView}>
<View> <View>
<Text style={styles.modalLabel}>Selecione uma imagem</Text> <Text style={styles.modalLabel}>Selecione uma imagem</Text>
<TouchableOpacity style={{ width: 300 }} onPress={requestPermissionCamera}>
<TouchableOpacity
style={{ width: 300 }}
onPress={() => {
requestPermissionCamera() &&
launchCamera(onChangeImage, () =>
setModalVisible(false)
);
}}
>
<Text style={styles.modalText}>Câmera</Text> <Text style={styles.modalText}>Câmera</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{ width: 300 }} onPress={launchImageLibrary}>
<TouchableOpacity
style={{ width: 300 }}
onPress={() => {
requestPermissionGallery() &&
launchImageLibrary(onChangeImage, () =>
setModalVisible(false)
);
}}
>
<Text style={styles.modalText}>Galeria</Text> <Text style={styles.modalText}>Galeria</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<TouchableOpacity style={{ width: 300 }} onPress={() => { setModalVisible(false) }}>
<Text style={{ fontWeight: 'bold', marginTop: 20, fontSize: 14, textAlign: 'center' }}>
<TouchableOpacity
style={{ width: 300 }}
onPress={() => {
setModalVisible(false);
}}
>
<Text
style={{
fontWeight: "bold",
marginTop: 20,
fontSize: 14,
textAlign: "center",
}}
>
Cancelar Cancelar
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
@ -112,12 +156,11 @@ function ImageInput({ imageUri, onChangeImage }) {
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
</Modal> </Modal>
</View>*/}
</View>
</View> </View>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
alignItems: "center", alignItems: "center",

Loading…
Cancel
Save