centering marker image on the mapformscreen

src/app/components/map/Map.html

@@ -80,9 +80,9 @@
       window.ReactNativeWebView.postMessage(JSON.stringify(payload));
     }
 
-    var marker = L.marker([0, 0]).bindPopup("Your pickup spot is in this area").addTo(map);
+    //var marker = L.marker([0, 0]).bindPopup("Your pickup spot is in this area").addTo(map);
     function onMoveEnd(e) {
-      marker.setLatLng(map.getCenter());
+      //marker.setLatLng(map.getCenter());
 
       var payload = {
         code: 3,

src/app/screens/MapFormScreen.js

@@ -1,6 +1,5 @@
 import React, { useContext, useState } from "react";
 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";
@@ -17,9 +16,6 @@ const MapFormScreen = (props) => {
   const context = useContext(EventLocationContext); //local do evento
   const contextLocation = useContext(CurrentLocationContext); //local do usuário
 
-  const [marker, setMarker] = useState(context.eventCoordinates);
-
-  
   const [moveEndListener, setMoveEndListener] = useState("");
   console.log(moveEndListener);
 
@@ -55,36 +51,19 @@ const MapFormScreen = (props) => {
     latitudeDelta: 70,
     longitudeDelta: 70 * (screen_width / screen_height),
   };
-
-
-
-
   return (
     <View style={styles.container}>
       <OpenStreetMap
+        style={styles.mapStyle}
         moveEndListener={setMoveEndListener}
       />
-      {/*<MapView
-        style={styles.mapStyle}
-        showsUserLocation={true}
-        initialRegion={{ ...default_location }}
-        region={{
-          latitude: marker.latitude,
-          longitude: marker.longitude,
-          ...lat_long_delta,
-        }}
-        onRegionChangeComplete={(r) => {
-         // console.log(r);
-          setMarker({ latitude: r.latitude, longitude: r.longitude });
-        }}
-      />*/}
-      {/*<View style={styles.markerFixed}>
+      <View style={styles.markerFixed}>
         <Image
           style={styles.marker}
           resizeMode="contain"
           source={require("../assets/map-marker.png")}
         />
-    </View>*/}
+    </View>
 
       <View style={styles.submit_btn}>
         <TouchableOpacity onPress={() => setLocation()}>
@@ -107,9 +86,12 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: colors.black,
     flex: 1,
+    justifyContent: "center",
+    flexDirection: "row"
   },
   mapStyle: {
     position: "absolute",
+    alignSelf:"center",
     top: 0,
     left: 0,
     right: 0,
@@ -126,15 +108,19 @@ const styles = StyleSheet.create({
     textAlign: "center",
   },
   markerFixed: {
-    left: "50%",
-    marginLeft: -19,
-    marginTop: -48,
-    alignItems:"center",
+    //left: "50%",
+    // marginLeft: -19,
+    // marginTop: -48,
+    alignSelf: "center",
+    justifyContent: "center",
     position: "absolute",
-    bottom: "50%",
-    top:"50%",
-    height: "20%",
+    flexDirection:"row",
+    alignItems:"flex-start",
+    // bottom: "50%",
+    // top: "50%",
+    height: "13%",
     width: 38,
+    //backgroundColor: "black"
   },
   text: {
     color: colors.white,
@@ -143,9 +129,9 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
   },
   marker: {
-    height: "40%",
-    alignSelf:"center",
-    width: 38,
+    height: "50%",
+ //   alignSelf:"flex-end",
+    width: 40,
   },
   callback: {
     bottom: 100,

src/package-lock.json

@@ -17005,9 +17005,9 @@
       }
     },
     "react-native-webview": {
-      "version": "11.6.2",
-      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-11.6.2.tgz",
-      "integrity": "sha512-7e5ltLBgqt1mX0gdTTS2nFPIjfS6y300wqJ4rLWqU71lDO+8ZeayfsF5qo83qxo2Go74CtLnSeWae4pdGwUqYw==",
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-10.7.0.tgz",
+      "integrity": "sha512-4TSYwJqMBUTKB9+xqGbPwx+eLXbp6RRD7lQ2BumT8eSTfuuqr2rXNqcrlKU1VRla7QGGYowmYmxl2aXIx5k9wA==",
       "requires": {
         "escape-string-regexp": "2.0.0",
         "invariant": "2.2.4"

src/package.json

@@ -55,7 +55,7 @@
     "react-native-svg-uri": "^1.2.3",
     "react-native-walkthrough-tooltip": "^1.1.11",
     "react-native-web": "~0.13.12",
-    "react-native-webview": "^11.6.2",
+    "react-native-webview": "10.7.0",
     "react-navigation": "^4.4.3",
     "react-navigation-header-buttons": "^7.0.1",
     "react-navigation-tabs": "^2.10.1",