trying to solve a issue with OSM on MapFormsScreen

src/App.js

@@ -15,6 +15,7 @@ import AuthNavigator from "./app/navigation/AuthNavigator";
 import { AuthContext } from "./app/auth/context";
 import authStorage from "./app/auth/storage";
 import MapDataProvider from "./app/context/MapDataContext";
+import MapRefProvider from "./app/context/MapRefContext";
 
 export default function App() {
   const [user, setUser] = useState();
@@ -33,7 +34,7 @@ export default function App() {
   global.userDataBase = openDatabase();
   initDatabase(global.userDataBase);
 
-  return (    
+  return (
     <AuthContext.Provider
       value={{
         user,
@@ -42,12 +43,14 @@ export default function App() {
     >
       <CurrentLocationProvider>
         <EventLocationProvider>
-          <MapDataProvider>
-            <NavigationContainer theme={navigationTheme}>
-              {user ? <AppNavigator /> : <AuthNavigator />}
-              <FlashMessage position="top" />
-            </NavigationContainer>
-          </MapDataProvider>
+          <MapRefProvider>
+            <MapDataProvider>
+              <NavigationContainer theme={navigationTheme}>
+                {user ? <AppNavigator /> : <AuthNavigator />}
+                <FlashMessage position="top" />
+              </NavigationContainer>
+            </MapDataProvider>
+          </MapRefProvider>
         </EventLocationProvider>
       </CurrentLocationProvider>
     </AuthContext.Provider>

src/app/components/map/LeafLetMap.js

@@ -22,7 +22,9 @@ const loadHTMLFile = async () => {
 };
 
 function goToRegion(mapRef, { lat, long, zoom }) {
-  mapRef.injectJavaScript(`map.setView([${lat}, ${long}], ${zoom});`);
+  
+  mapRef.injectJavaScript(`
+    map.setView([${lat}, ${long}], ${zoom}); moveend=false`);
 }
 
 const code_to_function = {

src/app/components/map/Map.html

@@ -61,6 +61,8 @@
       }
     ).addTo(map);
 
+    var moveend = true;
+
     function onMapClick(e) {
       var payload = {
         code: 1,
@@ -91,6 +93,7 @@
           longitude: map.getCenter().lng,
         },
       };
+     // map.setView([e.latlng.lat, e.latlng.lng]);
       window.ReactNativeWebView.postMessage(JSON.stringify(payload));
     }
 

src/app/components/map/OpenStreetMap.js

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { View, StyleSheet, Text } from "react-native";
 import WebView from "react-native-webview";
+import { MapRefContext } from "../../context/MapRefContext";
 import {
   loadHTMLFile,
   handleEvent,
@@ -43,6 +44,7 @@ export default function OpenStreetMap({
   const [mapRef, setMapRef] = useState(null);
   const [webviewContent, setWebviewContent] = useState(null);
   const [markerListener, setMarkerListener] = useState(null);
+  const refContext = useContext(MapRefContext);
 
   if (mapRef != null) {
     animateToPosition != null && goToRegion(mapRef, animateToPosition);
@@ -62,7 +64,7 @@ export default function OpenStreetMap({
     <View flex={1}>
       <WebView
         ref={(webViewRef) => {
-          setMapRef(webViewRef);
+          refContext.setMapRef(webViewRef);
         }}
         onMessage={(event) => {
           bindEventsToListeners(

src/app/context/MapRefContext.js

@@ -0,0 +1,19 @@
+import React, { useState, createContext, useContext, useEffect } from "react"
+
+export const MapRefContext = createContext();
+
+const MapRefProvider = ({ children }) => {
+
+    //problema:  as vzs renderiza antes de carregar a localização correta do usuário 
+    const [mapRef, setMapRef] = useState();
+
+    return (
+        <MapRefContext.Provider value={{
+            mapRef,
+            setMapRef,
+        }}>
+            {children}
+        </MapRefContext.Provider>
+    )
+}
+export default MapRefProvider;

src/app/screens/MapFormScreen.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useContext, useState, useEffect, memo } from "react";
 import { StyleSheet, View, Text, Image } from "react-native";
 
 import colors from "../config/colors";
@@ -9,14 +9,15 @@ import { EventLocationContext } from "../context/EventLocationContext";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import { CurrentLocationContext } from "../context/CurrentLocationContext";
 import OpenStreetMap from "../components/map/OpenStreetMap";
+import { MapRefContext } from "../context/MapRefContext";
 
 // 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 context = useContext(EventLocationContext); //local do evento  
   const [position, setPosition] = useState(null);
-  const location = useContext(CurrentLocationContext).currentCoordinates;
-  
+  const location = useContext(EventLocationContext).eventCoordinates;
+
   useEffect(() => {
     setPosition({
       lat: location["latitude"],
@@ -25,8 +26,8 @@ const MapFormScreen = (props) => {
     });
   }, [location]);
 
-  const [moveEndListener, setMoveEndListener] = useState("");
-  console.log(moveEndListener);
+  const [moveEndListener, setMoveEndListener] = useState(null);
+  //console.log("=====POSIÇÃO:  " +position.lat);
 
   const getAddress = async (coordenadas) => {
     Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
@@ -42,19 +43,42 @@ const MapFormScreen = (props) => {
       context.saveNewLocation("Erro ao carregar endereço", coordenadas);
     }
   };
+  const refContext = useContext(MapRefContext);
 
   const setLocation = () => {
     getAddress(moveEndListener);
     props.navigation.goBack(null);
   };
 
+
+  //leva o mapa pra localização escolhida pelo usuário
+  const aplyLocation = (p) => {
+     //setPosition(position);
+    setMoveEndListener(p);
+    if (refContext.mapRef) {
+       refContext.mapRef.injectJavaScript(`
+       if(moveend == true){
+       map.setView([${p.latitude}, ${p.longitude}], ${16.5}); moveend=false
+       }`);
+     }
+  };
+
+  //inicia o mapa na região do usuário ou no ultimo valor do marker
+ if (refContext.mapRef && moveEndListener==null ) {
+    console.log("IIIIIIIIIIIIIIIIIIIIF    "+ location.latitude)
+    refContext.mapRef.injectJavaScript(`
+    map.setView([${position.lat}, ${position.long}], ${16.5}); moveend=false
+    `);
+  }
+ 
+  
   return (
     <View style={styles.container}>
       <OpenStreetMap
         style={styles.mapStyle}
         animateToPosition={position}
-        moveEndListener={setMoveEndListener}
-        
+        moveEndListener={e => aplyLocation(e)}
+
       />
       <View style={styles.markerFixed}>
         <Image
@@ -62,7 +86,7 @@ const MapFormScreen = (props) => {
           resizeMode="contain"
           source={require("../assets/map-marker.png")}
         />
-    </View>
+      </View>
 
       <View style={styles.submit_btn}>
         <TouchableOpacity onPress={() => setLocation()}>
@@ -90,7 +114,7 @@ const styles = StyleSheet.create({
   },
   mapStyle: {
     position: "absolute",
-    alignSelf:"center",
+    alignSelf: "center",
     top: 0,
     left: 0,
     right: 0,
@@ -113,8 +137,8 @@ const styles = StyleSheet.create({
     alignSelf: "center",
     justifyContent: "center",
     position: "absolute",
-    flexDirection:"row",
-    alignItems:"flex-start",
+    flexDirection: "row",
+    alignItems: "flex-start",
     // bottom: "50%",
     // top: "50%",
     height: "13%",
@@ -129,7 +153,7 @@ const styles = StyleSheet.create({
   },
   marker: {
     height: "50%",
- //   alignSelf:"flex-end",
+    //   alignSelf:"flex-end",
     width: 40,
   },
   callback: {