map view state

src/screens/InAppScreens/MapScreen/index.tsx

@@ -74,6 +74,13 @@ const localDareDir = `${FileSystem.cacheDirectory}tiles/regions_mqp`;
 
 const AnimatedMarker = Animation.createAnimatedComponent(Marker);
 
+const INITIAL_REGION = {
+  latitude: 0,
+  longitude: 0,
+  latitudeDelta: 180,
+  longitudeDelta: 180
+};
+
 const MapScreen: React.FC<MapScreenProps> = ({ navigation, route }) => {
   const [dareData, setDareData] = useState(jsonData);
   const tilesBaseURL = `${FASTEST_MAP_HOST}/tiles_osm`;
@@ -141,6 +148,8 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation, route }) => {
   const savedVisitedTilesUrl = storage.get('visitedTilesUrl', StoreType.STRING) as string;
   const [userInfoData, setUserInfoData] = useState<any>(null);
 
+  const [initialRegion, setInitialRegion] = useState(INITIAL_REGION);
+
   useFocusEffect(
     useCallback(() => {
       const updateMarkers = async () => {
@@ -164,6 +173,27 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation, route }) => {
     }, [userData])
   );
 
+  useEffect(() => {
+    const loadInitialRegion = () => {
+      try {
+        const savedInitialRegion = storage.get('initialRegion', StoreType.STRING) as string;
+        if (savedInitialRegion) {
+          const region = JSON.parse(savedInitialRegion);
+          setInitialRegion(region);
+
+          const currentZoom = Math.log2(360 / region.latitudeDelta);
+          if (currentZoom >= 7) {
+            findFeaturesInVisibleMapArea(region);
+          }
+        }
+      } catch (e) {
+        console.error('Failed to load saved initial region:', e);
+      }
+    };
+
+    loadInitialRegion();
+  }, [dareData]);
+
   useEffect(() => {
     if (route.params?.id && route.params?.type && dareData) {
       handleFindRegion(route.params?.id, route.params?.type);
@@ -289,11 +319,13 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation, route }) => {
   }, []);
 
   const findFeaturesInVisibleMapArea = async (visibleMapArea: {
-    latitude?: any;
-    longitude?: any;
+    latitude: any;
+    longitude: any;
     latitudeDelta: any;
-    longitudeDelta?: any;
+    longitudeDelta: any;
   }) => {
+    storage.set('initialRegion', JSON.stringify(visibleMapArea));
+
     if (!isConnected) return;
     const currentZoom = Math.log2(360 / visibleMapArea.latitudeDelta);
     setZoomLevel(currentZoom);
@@ -794,12 +826,7 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation, route }) => {
   return (
     <View style={styles.container}>
       <ClusteredMapView
-        initialRegion={{
-          latitude: 0,
-          longitude: 0,
-          latitudeDelta: 180,
-          longitudeDelta: 180
-        }}
+        region={initialRegion}
         ref={mapRef}
         showsMyLocationButton={false}
         showsCompass={false}