@ -1,29 +1,19 @@
import React , { useContext , useState , useEffect , memo } from "react" ;
import { StyleSheet , View , Text , Image } from "react-native" ;
import * as Location from "expo-location" ;
import colors from "../config/colors" ;
import * as Location from "expo-location" ;
import { EventLocationContext } from "../context/EventLocationContext" ;
import { TouchableOpacity } from "react-native-gesture-handler" ;
import OpenStreetMap from "../components/map/OpenStreetMap" ;
import useLocation from "../hooks/useLocation" ;
// 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 [ position , setPosition ] = useState ( null ) ;
const location = useContext ( EventLocationContext ) . eventCoordinates ;
useEffect ( ( ) => {
setPosition ( {
lat : location [ "latitude" ] ,
long : location [ "longitude" ] ,
zoom : 16.5 ,
} ) ;
} , [ location ] ) ;
const position = useLocation ( { lat : 0.0 , long : 0.0 , zoom : 16.5 } ) ;
const [ moveEndListener , setMoveEndListener ] = useState ( null ) ;
console . log ( "=====POSIÇÃO: " + typeof location ) ;
const getAddress = async ( coordenadas ) => {
Location . setGoogleApiKey ( "AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc" ) ;
@ -32,9 +22,10 @@ const MapFormScreen = (props) => {
console . log ( address ) ;
console . log ( coordenadas ) ;
if ( address [ 0 ] != undefined ) {
var street = ( address [ 0 ] . street == null ? "" : address [ 0 ] . street ) ;
var number = ( address [ 0 ] . name == null ? "" : ", " + address [ 0 ] . name ) ;
var district = ( address [ 0 ] . district == null ? "" : "\n" + address [ 0 ] . district ) ;
var street = address [ 0 ] . street == null ? "" : address [ 0 ] . street ;
var number = address [ 0 ] . name == null ? "" : ", " + address [ 0 ] . name ;
var district =
address [ 0 ] . district == null ? "" : "\n" + address [ 0 ] . district ;
context . saveNewLocation ( street + number + district , coordenadas ) ;
} else {
//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
@ -48,15 +39,19 @@ const MapFormScreen = (props) => {
//leva o mapa pra localização escolhida pelo usuário
const moveLocation = ( l ) => {
console . log ( l ) ;
setMoveEndListener ( l ) ;
setPosition ( l ) ;
// setPosition({
// lat: l["latitude"],
// long: l["longitude"],
// zoom: 16.5,
// });
} ;
return (
< View style = { styles . container } >
< OpenStreetMap
style = { styles . mapStyle }
moveEndListener = { e => moveLocation ( e ) }
moveEndListener = { ( e ) => moveLocation ( e ) }
animateToPosition = { position }
/ >
< View style = { styles . markerFixed } >
@ -89,15 +84,7 @@ const styles = StyleSheet.create({
backgroundColor : colors . black ,
flex : 1 ,
justifyContent : "center" ,
flexDirection : "row"
} ,
mapStyle : {
position : "absolute" ,
alignSelf : "center" ,
top : 0 ,
left : 0 ,
right : 0 ,
bottom : 0 ,
flexDirection : "row" ,
} ,
button : {
backgroundColor : "#1976D2" ,
@ -128,14 +115,6 @@ const styles = StyleSheet.create({
height : "50%" ,
width : 40 ,
} ,
callback : {
bottom : 100 ,
alignSelf : "center" ,
alignItems : "center" ,
backgroundColor : "gray" ,
width : "80%" ,
padding : 10 ,
} ,
} ) ;
export default MapFormScreen ;
GabrielTrettel
3 years ago