diff --git a/src/app/screens/MapFormScreen.js b/src/app/screens/MapFormScreen.js index 9228714..3a37dbf 100644 --- a/src/app/screens/MapFormScreen.js +++ b/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 }); + }} + > + + + + - - setMarker({ x: e.nativeEvent.coordinate }.x) - } - > - - - setLocation()}> + setLocation()}> Confirmar - ); -} +}; 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;