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

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;