Browse Source

MapFormScreen like uber pick location (this time adding the actual file to git)

master
GabrielTrettel 4 years ago
parent
commit
d97074bb96
  1. 85
      src/app/screens/MapFormScreen.js

85
src/app/screens/MapFormScreen.js

@ -1,44 +1,47 @@
import React, { useContext, useState } from "react";
import { Button, StyleSheet, View, Text } from "react-native";
import MapView, { Marker } from "react-native-maps";
import { StyleSheet, View, Text, Image } from "react-native";
import MapView from "react-native-maps";
import colors from "../config/colors";
import { screen_width, screen_height } from "../config/dimensions";
import * as Location from 'expo-location';
import * as Location from "expo-location";
import { EventLocationContext } from "../context/EventLocationContext";
import { TouchableOpacity } from "react-native-gesture-handler";
import { CurrentLocationContext } from "../context/CurrentLocationContext";
//Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga)
// NOTE: Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga)
const MapFormScreen = (props) => {
const context = useContext(EventLocationContext); //local do evento
const contextLocation = useContext(CurrentLocationContext) //local do usuário
const location = contextLocation.currentCoordinates;
const context = useContext(EventLocationContext); //local do evento
const contextLocation = useContext(CurrentLocationContext); //local do usuário
const [marker, setMarker] = useState(context.eventCoordinates);
// console.log(marker);
const getAddress = async (coordenadas) => {
Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
const address = await Location.reverseGeocodeAsync(coordenadas);
if (address[0] != undefined) {
context.saveNewLocation(address[0].street + ", " + address[0].name + "\n" + address[0].district, coordenadas);
}
else{//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
context.saveNewLocation(
address[0].street +
", " +
address[0].name +
"\n" +
address[0].district,
coordenadas
);
} else {
//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
context.saveNewLocation("Erro ao carregar endereço", coordenadas);
}
}
};
const setLocation = () => {
getAddress(marker);
props.navigation.goBack(null);
}
};
// console.log(markers);
const map_scale = 0.003;
const lat_long_delta = {
latitudeDelta: map_scale,
@ -52,7 +55,7 @@ const MapFormScreen = (props) => {
showsUserLocation={true}
initialRegion={{
latitude: -23.533773,
longitude: -46.625290,
longitude: -46.62529,
...lat_long_delta,
}}
region={{
@ -60,30 +63,35 @@ const MapFormScreen = (props) => {
longitude: marker.longitude,
...lat_long_delta,
}}
onRegionChangeComplete={(r) => {
console.log(r);
setMarker({ latitude: r.latitude, longitude: r.longitude });
}}
></MapView>
<View style={styles.markerFixed}>
<Image
style={styles.marker}
resizeMode="contain"
source={require("../assets/map-marker.png")}
/>
</View>
<View
style={{
flexDirection: "column",
flex: 1,
justifyContent: "flex-end",
padding: 10,
}}
>
<Marker
draggable={true}
coordinate={{
latitude: context.eventCoordinates.latitude,
longitude: context.eventCoordinates.longitude,
}}
onDragEnd={(e) =>
setMarker({ x: e.nativeEvent.coordinate }.x)
}
></Marker>
</MapView>
<View style={{ flexDirection: "column", flex: 1, justifyContent: "flex-end", padding: 10 }}>
<TouchableOpacity
onPress={() => setLocation()}>
<TouchableOpacity onPress={() => setLocation()}>
<View style={styles.button}>
<Text style={styles.text}>Confirmar</Text>
</View>
</TouchableOpacity>
</View>
</View>
);
}
};
const styles = StyleSheet.create({
container: {
@ -107,12 +115,25 @@ const styles = StyleSheet.create({
marginVertical: 10,
textAlign: "center",
},
markerFixed: {
left: "50%",
marginLeft: -24,
marginTop: -48,
position: "absolute",
top: "50%",
height: 48,
width: 48,
},
text: {
color: colors.white,
fontSize: 16,
textTransform: "uppercase",
fontWeight: "bold",
},
marker: {
height: 48,
width: 48,
},
});
export default MapFormScreen;
Loading…
Cancel
Save