Browse Source

updating map layout

master
analuizaff 4 years ago
parent
commit
726e4cc122
  1. 3
      src/app/context/EventLocationContext.js
  2. 68
      src/app/screens/MapFormScreen.js

3
src/app/context/EventLocationContext.js

@ -11,14 +11,11 @@ const EventLocationProvider = ({ children }) => {
const [eventLocation, setEventLocation] = useState(context.currentLocation); const [eventLocation, setEventLocation] = useState(context.currentLocation);
const [eventCoordinates, setEventCoordinates] = useState(context.currentCoordinates); const [eventCoordinates, setEventCoordinates] = useState(context.currentCoordinates);
console.log(context.currentLocation);
//Função chamada em MapFormScreen após o usuário definir a nova localização //Função chamada em MapFormScreen após o usuário definir a nova localização
const saveNewLocation = (local, coordinates) => { const saveNewLocation = (local, coordinates) => {
setEventLocation(local); setEventLocation(local);
setEventCoordinates(coordinates); setEventCoordinates(coordinates);
// console.log("NOVO LOCAL: " + local);
// console.log("NOVa coordenada: " + coordinates.latitude);
} }

68
src/app/screens/MapFormScreen.js

@ -1,31 +1,36 @@
import React, { useContext } from "react";
import React, { useContext, useState } from "react";
import { Button, StyleSheet, View, Text } from "react-native"; import { Button, StyleSheet, View, Text } from "react-native";
import MapView, { Marker } from "react-native-maps"; import MapView, { Marker } from "react-native-maps";
import colors from "../config/colors"; import colors from "../config/colors";
import { screen_width, screen_height } from "../config/dimensions"; import { screen_width, screen_height } from "../config/dimensions";
import useLocation from "../hooks/useLocation";
import * as Location from 'expo-location'; import * as Location from 'expo-location';
import { EventLocationContext } from "../context/EventLocationContext"; 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) //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 MapFormScreen = (props) => {
// const location = useLocation({
// latitude: -23.533773,
// longitude: -46.625290,
//});
const getAddress = async(coordenadas) => {
const context = useContext(EventLocationContext); //local do evento
const contextLocation = useContext(CurrentLocationContext) //local do usuário
const location = contextLocation.currentCoordinates;
const [marker, setMarker] = useState(context.eventCoordinates);
const getAddress = async (coordenadas) => {
Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc"); Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
const address = await Location.reverseGeocodeAsync(coordenadas.x);
// console.log(address);
context.saveNewLocation(address[0].street+", " + address[0].name +"\n" + address[0].district, coordenadas.x);
const address = await Location.reverseGeocodeAsync(coordenadas);
context.saveNewLocation(address[0].street + ", " + address[0].name + "\n" + address[0].district, coordenadas);
} }
const context = useContext(EventLocationContext);
const setLocation = () => {
getAddress(marker);
props.navigation.goBack(null);
}
// console.log(markers); // console.log(markers);
const map_scale = 0.003; const map_scale = 0.003;
@ -34,9 +39,6 @@ const MapFormScreen = (props) => {
longitudeDelta: map_scale * (screen_width / screen_height), longitudeDelta: map_scale * (screen_width / screen_height),
}; };
//const local = useLocation();
//Deixei a localizção setada em sp só para fazer os testes
return ( return (
<View style={styles.container}> <View style={styles.container}>
<MapView <MapView
@ -48,26 +50,32 @@ const MapFormScreen = (props) => {
...lat_long_delta, ...lat_long_delta,
}} }}
region={{ region={{
latitude: -23.533773,
longitude: -46.625290,
latitude: location.latitude,
longitude: location.longitude,
...lat_long_delta, ...lat_long_delta,
}} }}
> >
<Marker <Marker
draggable={true} draggable={true}
coordinate={{ coordinate={{
latitude: -23.533773,
longitude: -46.625290,
latitude: context.eventCoordinates.latitude,
longitude: context.eventCoordinates.longitude,
}} }}
onDragEnd={(e) => onDragEnd={(e) =>
getAddress({ x: e.nativeEvent.coordinate })
setMarker({ x: e.nativeEvent.coordinate }.x)
} }
></Marker> ></Marker>
</MapView> </MapView>
<Button title="Confirmar" onPress={() => props.navigation.goBack(null)} />
<Text>{context.eventLocation.toString()}</Text>
<View style={{ flexDirection: "column", flex: 1, justifyContent: "flex-end", padding: 10 }}>
<TouchableOpacity
onPress={() => setLocation()}>
<View style={styles.button}>
<Text style={styles.text}>Confirmar</Text>
</View>
</TouchableOpacity>
</View>
</View> </View>
); );
} }
@ -83,6 +91,22 @@ const styles = StyleSheet.create({
right: 0, right: 0,
bottom: 0, bottom: 0,
}, },
button: {
backgroundColor: "#1976D2",
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
width: "100%",
height: 42,
marginVertical: 10,
textAlign: "center",
},
text: {
color: colors.white,
fontSize: 16,
textTransform: "uppercase",
fontWeight: "bold",
},
}); });
export default MapFormScreen; export default MapFormScreen;
Loading…
Cancel
Save