series catch

src/screens/InAppScreens/MapScreen/index.tsx

@@ -289,6 +289,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
   const tabBarHeight = useBottomTabBarHeight();
   const userId = storage.get('uid', StoreType.STRING) as string;
   const token = storage.get('token', StoreType.STRING) as string;
+  const cleanupTimeoutRef = useRef<any>(null);
 
   const [isConnected, setIsConnected] = useState<boolean>(true);
   const netInfo = useConnection();
@@ -573,7 +574,18 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         refetchVisitedCountries();
         refetchVisitedDare();
       }
-    }, [navigation])
+
+      return () => {
+        if (cleanupTimeoutRef.current) {
+          clearTimeout(cleanupTimeoutRef.current);
+        }
+
+        cleanupTimeoutRef.current = setTimeout(() => {
+          setImages({});
+          processedImages.current.clear();
+        }, 1000);
+      };
+    }, [navigation, token])
   );
 
   // to do refactor
@@ -1312,17 +1324,25 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         onRegionWillChange={_.debounce(handleMapChange, 200)}
       >
         <MapLibreRN.Images
-          images={images}
+          images={{
+            ...images,
+            'default-series-icon': defaultSeriesIcon
+          }}
           onImageMissing={(image) => {
-            if (processedImages.current.has(image)) {
-              return;
-            }
+            try {
+              if (processedImages.current.has(image)) {
+                return;
+              }
+
+              processedImages.current.add(image);
 
-            processedImages.current.add(image);
-            setImages((prevImages: any) => ({
-              ...prevImages,
-              [image]: defaultSeriesIcon
-            }));
+              setImages((prevImages: any) => ({
+                ...prevImages,
+                [image]: defaultSeriesIcon
+              }));
+            } catch (error) {
+              console.error('Error in onImageMissing:', error);
+            }
           }}
         >
           <View />
@@ -1463,59 +1483,73 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
           tileUrlTemplates={[VECTOR_MAP_HOST + '/tiles/series/{z}/{x}/{y}.pbf']}
           onPress={handleMarkerPress}
         >
-          {seriesFilter.status !== 1 && Object.keys(images).length > 0 ? (
-            <MapLibreRN.SymbolLayer
-              id={series_layer.id}
-              sourceID={series_layer.source}
-              sourceLayerID={series_layer['source-layer']}
-              aboveLayerID={Platform.OS === 'android' ? 'waterway-name' : undefined}
-              filter={seriesNotVisitedFilter as any}
-              minZoomLevel={series_layer.minzoom}
-              maxZoomLevel={series_layer.maxzoom}
-              style={{
-                symbolSpacing: 1,
-                iconImage: ['get', 'series_id'],
-                iconSize: 0.51,
-                iconAllowOverlap: true,
-                iconIgnorePlacement: true,
-                visibility: 'visible',
-                iconColor: '#666',
-                iconOpacity: 1,
-                iconHaloColor: '#ffffff',
-                iconHaloWidth: 1,
-                iconHaloBlur: 0.5
-              }}
-            />
-          ) : (
-            <></>
-          )}
-
-          {seriesFilter.status !== 0 && Object.keys(images).length > 0 ? (
-            <MapLibreRN.SymbolLayer
-              id={series_visited.id}
-              sourceID={series_visited.source}
-              sourceLayerID={series_visited['source-layer']}
-              aboveLayerID={Platform.OS === 'android' ? 'waterway-name' : undefined}
-              filter={seriesVisitedFilter as any}
-              minZoomLevel={series_visited.minzoom}
-              maxZoomLevel={series_visited.maxzoom}
-              style={{
-                symbolSpacing: 1,
-                iconImage: '{series_id}v',
-                iconSize: 0.51,
-                iconAllowOverlap: true,
-                iconIgnorePlacement: true,
-                visibility: 'visible',
-                iconColor: '#666',
-                iconOpacity: 1,
-                iconHaloColor: '#ffffff',
-                iconHaloWidth: 1,
-                iconHaloBlur: 0.5
-              }}
-            />
-          ) : (
-            <></>
-          )}
+          {seriesFilter.status !== 1 && Object.keys(images).length > 0
+            ? (() => {
+                try {
+                  return (
+                    <MapLibreRN.SymbolLayer
+                      id={series_layer.id}
+                      sourceID={series_layer.source}
+                      sourceLayerID={series_layer['source-layer']}
+                      aboveLayerID={Platform.OS === 'android' ? 'waterway-name' : undefined}
+                      filter={seriesNotVisitedFilter as any}
+                      minZoomLevel={series_layer.minzoom}
+                      maxZoomLevel={series_layer.maxzoom}
+                      style={{
+                        symbolSpacing: 1,
+                        iconImage: '{series_id}',
+                        iconSize: 0.51,
+                        iconAllowOverlap: true,
+                        iconIgnorePlacement: true,
+                        visibility: 'visible',
+                        iconColor: '#666',
+                        iconOpacity: 1,
+                        iconHaloColor: '#ffffff',
+                        iconHaloWidth: 1,
+                        iconHaloBlur: 0.5
+                      }}
+                    />
+                  );
+                } catch (error) {
+                  console.warn('SymbolLayer render error:', error);
+                  return null;
+                }
+              })()
+            : null}
+
+          {seriesFilter.status !== 0 && Object.keys(images).length > 0
+            ? (() => {
+                try {
+                  return (
+                    <MapLibreRN.SymbolLayer
+                      id={series_visited.id}
+                      sourceID={series_visited.source}
+                      sourceLayerID={series_visited['source-layer']}
+                      aboveLayerID={Platform.OS === 'android' ? 'waterway-name' : undefined}
+                      filter={seriesVisitedFilter as any}
+                      minZoomLevel={series_visited.minzoom}
+                      maxZoomLevel={series_visited.maxzoom}
+                      style={{
+                        symbolSpacing: 1,
+                        iconImage: '{series_id}v',
+                        iconSize: 0.51,
+                        iconAllowOverlap: true,
+                        iconIgnorePlacement: true,
+                        visibility: 'visible',
+                        iconColor: '#666',
+                        iconOpacity: 1,
+                        iconHaloColor: '#ffffff',
+                        iconHaloWidth: 1,
+                        iconHaloBlur: 0.5
+                      }}
+                    />
+                  );
+                } catch (error) {
+                  console.warn('SymbolLayer render error:', error);
+                  return null;
+                }
+              })()
+            : null}
         </MapLibreRN.VectorSource>
 
         {nomads && showNomads && (