updating map layout

src/app/context/EventLocationContext.js

@@ -11,14 +11,11 @@ const EventLocationProvider = ({ children }) => {
     const [eventLocation, setEventLocation] = useState(context.currentLocation);
     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
     const saveNewLocation = (local, coordinates) => {
         setEventLocation(local);
         setEventCoordinates(coordinates);
-       // console.log("NOVO LOCAL: " + local);
-       // console.log("NOVa coordenada: " + coordinates.latitude);
     }
 
 

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 MapView, { Marker } from "react-native-maps";
 
 import colors from "../config/colors";
 import { screen_width, screen_height } from "../config/dimensions";
 
-import useLocation from "../hooks/useLocation";
 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)
 
 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");
 
-        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);
     const map_scale = 0.003;
@@ -34,9 +39,6 @@ const MapFormScreen = (props) => {
         longitudeDelta: map_scale * (screen_width / screen_height),
     };
 
-    //const local = useLocation();
-    //Deixei a localizção setada em sp só para fazer os testes
-
     return (
         <View style={styles.container}>
             <MapView
@@ -48,26 +50,32 @@ const MapFormScreen = (props) => {
                     ...lat_long_delta,
                 }}
                 region={{
-                    latitude: -23.533773,
-                    longitude:  -46.625290,
+                    latitude: location.latitude,
+                    longitude: location.longitude,
                     ...lat_long_delta,
                 }}
             >
                 <Marker
                     draggable={true}
                     coordinate={{
-                        latitude: -23.533773,
-                        longitude:  -46.625290,
+                        latitude: context.eventCoordinates.latitude,
+                        longitude: context.eventCoordinates.longitude,
                     }}
                     onDragEnd={(e) =>
-                        getAddress({ x: e.nativeEvent.coordinate })
+                        setMarker({ x: e.nativeEvent.coordinate }.x)
                     }
                 ></Marker>
             </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>
+
     );
 }
 
@@ -83,6 +91,22 @@ const styles = StyleSheet.create({
         right: 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;