Failed attempt to fix app defalut location error

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 {getLocation} from "./app/hooks/useLocation";
 
 export default function App() {
   const [user, setUser] = useState();
@@ -22,6 +23,7 @@ export default function App() {
   
   const restoreUser = async () => {
     const user = await authStorage.getUser();
+    global.location = await getLocation();
     if (user) setUser(user);
   };
 

src/app/components/map/OpenStreetMap.js

@@ -8,6 +8,7 @@ import {
   goToRegion,
 } from "./LeafLetMap";
 import MapModal from "../MapModal";
+import { useLocation, getLocation } from "../../hooks/useLocation";
 
 function bindEventsToListeners(
   event,
@@ -36,7 +37,6 @@ function notEmpy(lista) {
 
 export default function OpenStreetMap({
   markersList,
-  animateToPosition,
   clickListener,
   moveEndListener,
 }) {
@@ -44,12 +44,10 @@ export default function OpenStreetMap({
   const [webviewContent, setWebviewContent] = useState(null);
   const [markerListener, setMarkerListener] = useState(null);
 
-  useEffect(() => {
-    if (mapRef != null) {
-      goToRegion(mapRef, animateToPosition);
-    }
-  }, [mapRef, animateToPosition]);
+  const viewFunction = `\
+    setCustomView(${global.location.lat}, ${global.location.long}, 16.5);`;
 
+  console.log(global.location)
   markersList &&
     mapRef &&
     notEmpy(markersList) &&
@@ -77,6 +75,7 @@ export default function OpenStreetMap({
         }}
         javaScriptEnabled={true}
         source={{ html: webviewContent }}
+        injectedJavaScript={viewFunction}
       />
       <View>
         <MapModal
@@ -85,25 +84,8 @@ export default function OpenStreetMap({
           markers={markersList}
         />
       </View>
-
-      <View style={styles.callback}>
-        <Text style={styles.txt}>{markerListener}</Text>
-      </View>
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  callback: {
-    position: "absolute",
-    top: 30,
-    alignSelf: "center",
-    alignItems: "center",
-    backgroundColor: "gray",
-    width: "80%",
-    padding: 10,
-  },
-  txt: {
-    color: "white",
-  },
-});
+

src/app/config/globals.js

@@ -1,6 +1,6 @@
 // FIXME: convert this to Context kkkkkkk
 global.userDataBase = undefined;
-
+global.location = undefined;
 //Endereço do evento
 //global.eventAddress =  " ";
 //global.eventCoordinates = undefined;

src/app/hooks/useLocation.js

@@ -1,9 +1,7 @@
 import { useEffect, useState } from "react";
 import * as Location from "expo-location";
 
-export default function useLocation(
-  defaultLocation = { longitude: 0.0, latitude: 0.0 }
-) {
+function useLocation(defaultLocation = { longitude: 0.0, latitude: 0.0 }) {
   const [location, setLocation] = useState(defaultLocation);
 
   const getLocation = async () => {
@@ -30,3 +28,24 @@ export default function useLocation(
 
   return location;
 }
+
+const getLocation = async () => {
+  try {
+    const { granted } = await Location.requestPermissionsAsync();
+
+    if (!granted) return;
+
+    const {
+      coords: { latitude, longitude },
+    } = await Location.getCurrentPositionAsync({
+      accuracy: Location.Accuracy.BestForNavigation,
+    });
+
+    return { lat: latitude, long: longitude, zoom: 16.5 };
+  } catch (error) {
+    console.log(error);
+  }
+  return null;
+};
+
+export { useLocation, getLocation };

src/app/screens/MapFeedScreen.js

@@ -26,7 +26,8 @@ export default function MapFeedScreen() {
     <View style={styles.container}>
       <OpenStreetMap
         markersList={MapMarkerList({reload:focusChanged, renderRain:true})}
-        animateToPosition={position}
+        // animateToPosition={position}
+        centerUserLocation={true}
       />
 
     </View>

src/app/screens/MapFormScreen.js

@@ -7,12 +7,10 @@ import colors from "../config/colors";
 import { EventLocationContext } from "../context/EventLocationContext";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import OpenStreetMap from "../components/map/OpenStreetMap";
-import useLocation from "../hooks/useLocation";
 
 // 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 = useLocation({ lat: 0.0, long: 0.0, zoom: 16.5 });
   const [moveEndListener, setMoveEndListener] = useState(null);
 
   const getAddress = async (coordenadas) => {
@@ -45,14 +43,14 @@ const MapFormScreen = (props) => {
     //   lat: l["latitude"],
     //   long: l["longitude"],
     //   zoom: 16.5,
-    // });
+    // })
   };
 
   return (
     <View style={styles.container}>
       <OpenStreetMap
         moveEndListener={(e) => moveLocation(e)}
-        animateToPosition={position}
+        centerUserLocation={true}
       />
       <View style={styles.markerFixed}>
         <Image