Browse Source

image picker - modal

master
analuizaff 4 years ago
parent
commit
cf43dd1412
  1. 2
      src/App.js
  2. 56
      src/app/components/ImageInput.js
  3. 57
      src/app/components/LaunchCamera.js

2
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/>*/
);
}

56
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
},
});

57
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;
Loading…
Cancel
Save