OSM working better on MapFormScreen

src/App.js

@@ -15,7 +15,6 @@ 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();
@@ -43,14 +42,12 @@ export default function App() {
     >
       <CurrentLocationProvider>
         <EventLocationProvider>
-          <MapRefProvider>
             <MapDataProvider>
               <NavigationContainer theme={navigationTheme}>
                 {user ? <AppNavigator /> : <AuthNavigator />}
                 <FlashMessage position="top" />
               </NavigationContainer>
             </MapDataProvider>
-          </MapRefProvider>
         </EventLocationProvider>
       </CurrentLocationProvider>
     </AuthContext.Provider>

src/app/components/map/LeafLetMap.js

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

src/app/components/map/OpenStreetMap.js

@@ -1,7 +1,6 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState } from "react";
 import { View, StyleSheet, Text } from "react-native";
 import WebView from "react-native-webview";
-import { MapRefContext } from "../../context/MapRefContext";
 import {
   loadHTMLFile,
   handleEvent,
@@ -44,8 +43,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);
   }
@@ -64,7 +62,7 @@ export default function OpenStreetMap({
     <View flex={1}>
       <WebView
         ref={(webViewRef) => {
-          refContext.setMapRef(webViewRef);
+          setMapRef(webViewRef);
         }}
         onMessage={(event) => {
           bindEventsToListeners(

src/app/context/MapRefContext.js

@@ -1,19 +0,0 @@
-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

@@ -2,17 +2,13 @@ import React, { useContext, useState, useEffect, memo } from "react";
 import { StyleSheet, View, Text, Image } from "react-native";
 
 import colors from "../config/colors";
-import { screen_width, screen_height } from "../config/dimensions";
 
 import * as Location from "expo-location";
 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 [position, setPosition] = useState(null);
@@ -27,12 +23,14 @@ const MapFormScreen = (props) => {
   }, [location]);
 
   const [moveEndListener, setMoveEndListener] = useState(null);
-  //console.log("=====POSIÇÃO:  " +position.lat);
+  console.log("=====POSIÇÃO:  " + typeof location);
 
   const getAddress = async (coordenadas) => {
     Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
 
     const address = await Location.reverseGeocodeAsync(coordenadas);
+    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);
@@ -43,42 +41,23 @@ 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
-       }`);
-     }
+  const moveLocation = (l) => {
+    setMoveEndListener(l);
+    setPosition(l);
   };
 
-  //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}
+        moveEndListener={e => moveLocation(e)}
         animateToPosition={position}
-        moveEndListener={e => aplyLocation(e)}
-
       />
       <View style={styles.markerFixed}>
         <Image
@@ -131,19 +110,13 @@ const styles = StyleSheet.create({
     textAlign: "center",
   },
   markerFixed: {
-    //left: "50%",
-    // marginLeft: -19,
-    // marginTop: -48,
     alignSelf: "center",
     justifyContent: "center",
     position: "absolute",
     flexDirection: "row",
     alignItems: "flex-start",
-    // bottom: "50%",
-    // top: "50%",
     height: "13%",
     width: 38,
-    //backgroundColor: "black"
   },
   text: {
     color: colors.white,
@@ -153,7 +126,6 @@ const styles = StyleSheet.create({
   },
   marker: {
     height: "50%",
-    //   alignSelf:"flex-end",
     width: 40,
   },
   callback: {