series small icons

src/screens/InAppScreens/MapScreen/MarkerItem/styles.tsx

@@ -40,7 +40,7 @@ export const styles = StyleSheet.create({
     borderRadius: 19,
     borderWidth: 2,
     borderColor: Colors.TEXT_GRAY,
-    marginTop: Platform.OS === 'ios' ? -43 : -4
+    marginTop: Platform.OS === 'ios' ? -34 : -4
   },
   calloutImage: {
     width: 32,

src/screens/InAppScreens/MapScreen/UserItem/index.tsx

@@ -47,7 +47,13 @@ const UserItem = ({ marker }: { marker: any }) => {
               <View
                 style={[
                   styles.calloutImageContainer,
-                  { borderColor: Colors.WHITE, width: 54, height: 54, borderRadius: 27 }
+                  {
+                    borderColor: Colors.WHITE,
+                    width: 54,
+                    height: 54,
+                    borderRadius: 27,
+                    marginTop: -43
+                  }
                 ]}
               >
                 <Image

src/screens/InAppScreens/MapScreen/index.tsx

@@ -389,26 +389,37 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
 
   useEffect(() => {
     if (seriesIcons) {
-      let loadedSeriesImages: any = {};
-
-      seriesIcons.data.forEach(async (icon) => {
-        const id = icon.id;
-        const img = API_HOST + '/static/img/series_new2/' + icon.new_icon_png;
-        const imgVisited = API_HOST + '/static/img/series_new2/' + icon.new_icon_visited_png;
-        if (icon.new_icon_png && icon.new_icon_visited_png) {
-          loadedSeriesImages[id] = { uri: img };
-          loadedSeriesImages[`${id}v`] = { uri: imgVisited };
+      const loadImages = async () => {
+        const loadedSeriesImages: Record<string, { uri: string }> = {};
+        const prefetchUrls: string[] = [];
+  
+        const promises = seriesIcons.data.map(async (icon) => {
+          const id = icon.id;
+          const img = `${API_HOST}/static/img/series_new2_small/${icon.new_icon_png}`;
+          const imgVisited = `${API_HOST}/static/img/series_new2_small/${icon.new_icon_visited_png}`;
+
+          if (icon.new_icon_png && icon.new_icon_visited_png && !images[id] && !images[`${id}v`]) {
+            loadedSeriesImages[id] = { uri: img };
+            loadedSeriesImages[`${id}v`] = { uri: imgVisited };
+
+            const cachedUrl = await ExpoImage.getCachePathAsync(img);
+            const cachedUrlVisited = await ExpoImage.getCachePathAsync(imgVisited);
+
+            if (!cachedUrl) prefetchUrls.push(img);
+            if (!cachedUrlVisited) prefetchUrls.push(imgVisited);
+          }
+        });
 
-          const cachedUrl = await ExpoImage.getCachePathAsync(img);
-          const cachedUrlVisited = await ExpoImage.getCachePathAsync(imgVisited);
+        await Promise.all(promises);
 
-          if (!cachedUrl || !cachedUrlVisited) {
-            ExpoImage.prefetch([img, imgVisited]);
-          }
+        if (prefetchUrls.length > 0) {
+          ExpoImage.prefetch(prefetchUrls);
         }
-      });
 
-      setImages((prevImages: any) => ({ ...prevImages, ...loadedSeriesImages }));
+        setImages((prevImages: any) => ({ ...prevImages, ...loadedSeriesImages }));
+      };
+  
+      loadImages();
     }
   }, [seriesIcons]);
 
@@ -1253,7 +1264,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
               style={{
                 symbolSpacing: 1,
                 iconImage: ['get', 'series_id'],
-                iconSize: 0.18,
+                iconSize: 0.51,
                 iconAllowOverlap: true,
                 iconIgnorePlacement: true,
                 visibility: 'visible',
@@ -1280,7 +1291,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
               style={{
                 symbolSpacing: 1,
                 iconImage: '{series_id}v',
-                iconSize: 0.18,
+                iconSize: 0.51,
                 iconAllowOverlap: true,
                 iconIgnorePlacement: true,
                 visibility: 'visible',