Finalize MapView performance optimizations (#802)

* Revert "Add prop to improve performance of MapView (#800)"

This reverts commit 69d8e28.

* Memoize cluster components

* Revert "Memoize cluster components"

This reverts commit 653cd0f.

* Memoize default cluster view component

* Revert "Memoize default cluster view component"

This reverts commit 975b7ea.

* Optimize auto clustering

* More optimizations to auto clustering

* Allow a way to use default `icon` prop

* Fix condition

* Disable tracksViewChanges on default cluster

* Fix typo

Author: YoussefHenna

packages/maps/src/__tests__/MapView.test.tsx

@@ -186,7 +186,6 @@ describe("MapView tests", () => {
               }
             }
             onPress={[Function]}
-            tracksViewChanges={true}
           />,
           <Marker
             coordinate={
@@ -196,7 +195,6 @@ describe("MapView tests", () => {
               }
             }
             onPress={[Function]}
-            tracksViewChanges={true}
           />,
         ],
         [
@@ -208,7 +206,6 @@ describe("MapView tests", () => {
               }
             }
             onPress={[Function]}
-            tracksViewChanges={true}
           />,
           <Marker
             coordinate={
@@ -218,7 +215,6 @@ describe("MapView tests", () => {
               }
             }
             onPress={[Function]}
-            tracksViewChanges={true}
           />,
         ],
       ]
@@ -251,7 +247,6 @@ describe("MapView tests", () => {
               }
             }
             onPress={[Function]}
-            tracksViewChanges={true}
           />,
           <Marker
             coordinate={
@@ -261,7 +256,6 @@ describe("MapView tests", () => {
               }
             }
             onPress={[Function]}
-            tracksViewChanges={true}
           />,
         ],
         [
@@ -273,7 +267,6 @@ describe("MapView tests", () => {
               }
             }
             onPress={[Function]}
-            tracksViewChanges={true}
           />,
           <Marker
             coordinate={
@@ -283,7 +276,6 @@ describe("MapView tests", () => {
               }
             }
             onPress={[Function]}
-            tracksViewChanges={true}
           />,
         ],
       ]
@@ -340,7 +332,6 @@ describe("MapView tests", () => {
               }
             }
             onPress={[Function]}
-            tracksViewChanges={true}
           />,
           <Marker
             coordinate={
@@ -350,7 +341,6 @@ describe("MapView tests", () => {
               }
             }
             onPress={[Function]}
-            tracksViewChanges={true}
           />,
         ],
       ]

packages/maps/src/components/MapMarker.tsx

@@ -5,6 +5,7 @@ import {
   View,
   StyleSheet,
   Text,
+  Platform,
 } from "react-native";
 import { Marker as MapMarkerComponent } from "./react-native-maps";
 import type {
@@ -20,6 +21,7 @@ export interface MapMarkerProps
   longitude: number;
   pinImage?: string | ImageSourcePropType;
   pinImageSize?: number;
+  androidUseDefaultIconImplementation?: boolean;
   onPress?: (latitude: number, longitude: number) => void;
 }
 
@@ -40,6 +42,7 @@ export function renderMarker(
     longitude,
     pinImage,
     pinImageSize = 50,
+    androidUseDefaultIconImplementation = false,
     onPress,
     children,
     title,
@@ -76,6 +79,9 @@ export function renderMarker(
     );
   }
 
+  const shouldUseDefaultIconImplementation =
+    Platform.OS === "android" && androidUseDefaultIconImplementation;
+
   return (
     <MapMarkerComponent
       ref={ref}
@@ -89,11 +95,18 @@ export function renderMarker(
         const coordinate = event.nativeEvent.coordinate;
         onPress?.(coordinate.latitude, coordinate.longitude);
       }}
+      icon={
+        shouldUseDefaultIconImplementation
+          ? typeof pinImage === "string"
+            ? { uri: pinImage }
+            : (pinImage as any)
+          : undefined
+      }
       {...rest}
     >
       {nonCalloutChildren}
 
-      {pinImage && (
+      {pinImage && !shouldUseDefaultIconImplementation && (
         <Image
           testID="map-marker-pin-image"
           source={typeof pinImage === "string" ? { uri: pinImage } : pinImage}

packages/maps/src/components/MapView.tsx

@@ -42,9 +42,6 @@ export interface MapViewProps<T>
   longitude?: number;
   autoClusterMarkers?: boolean;
   autoClusterMarkersDistanceMeters?: number;
-  // Improves performance when panning by temporarily preventing markers from tracking view changes
-  // See `tracksViewChanges`: https://github.com/react-native-maps/react-native-maps/blob/master/docs/marker.md#props
-  disableTrackViewChangesWhenPanning?: boolean;
   markersData?: T[];
   keyExtractor?: (item: T, index: number) => string;
   renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
@@ -62,7 +59,6 @@ const MapViewF = <T extends object>({
   loadingEnabled = true,
   autoClusterMarkers = false,
   autoClusterMarkersDistanceMeters = 1000,
-  disableTrackViewChangesWhenPanning = true,
   markersData,
   keyExtractor,
   renderItem,
@@ -77,8 +73,6 @@ const MapViewF = <T extends object>({
   animateToLocation: (location: ZoomLocation) => void;
   mapRef: React.RefObject<MapViewComponent>;
 }) => {
-  const [markerTracksViewChanges, setMarkerTracksViewChanges] =
-    React.useState(true);
   const [currentRegion, setCurrentRegion] = React.useState<Region | null>(null);
   const delayedRegionValue = useDebounce(currentRegion, 300);
 
@@ -190,14 +184,20 @@ const MapViewF = <T extends object>({
   const clusterMarkers = React.useCallback(
     (
       markers: React.ReactElement[],
-      clusters: React.ReactElement[],
       distanceMeters: number,
       clusterView?: React.ReactElement
     ) => {
+      const clusters = [];
+      const clusteredMarkers: React.ReactElement[] = [];
+
       for (const marker of markers) {
         const { latitude: lat, longitude: long } =
           marker.props as MapMarkerProps;
 
+        if (clusteredMarkers.includes(marker)) {
+          continue;
+        }
+
         const nearbyMarkers = getNearbyMarkers(
           lat,
           long,
@@ -207,7 +207,7 @@ const MapViewF = <T extends object>({
 
         if (nearbyMarkers.length > 1) {
           for (const nearbyMarker of nearbyMarkers) {
-            markers.splice(markers.indexOf(nearbyMarker), 1);
+            clusteredMarkers.push(nearbyMarker);
           }
           clusters.push(
             <MapMarkerCluster>
@@ -217,6 +217,12 @@ const MapViewF = <T extends object>({
           );
         }
       }
+
+      const unClusteredMarkers = markers.filter(
+        (marker) => !clusteredMarkers.includes(marker)
+      );
+
+      return { clusters, unClusteredMarkers };
     },
     [getNearbyMarkers]
   );
@@ -241,36 +247,50 @@ const MapViewF = <T extends object>({
     };
 
     callOnRegionChange();
-
     // onRegionChange excluded to prevent calling on every rerender when using an anonymous function (which is most common)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [delayedRegionValue]);
 
-  const markers = React.useMemo(
-    () => getChildrenForType(MapMarker),
-    [getChildrenForType]
-  );
   const circles = React.useMemo(
     () => getChildrenForType(MapCircle),
     [getChildrenForType]
   );
-  const clusters = React.useMemo(
+
+  const markers = React.useMemo(
+    () => getChildrenForType(MapMarker),
+    [getChildrenForType]
+  );
+
+  const manualClusters = React.useMemo(
     () => getChildrenForType(MapMarkerCluster),
     [getChildrenForType]
   );
+
   const clusterView = React.useMemo(() => {
     const clusterViews = getChildrenForType(MapMarkerClusterView);
     return clusterViews.length ? clusterViews[0] : undefined; //Only take the first, ignore any others
   }, [getChildrenForType]);
 
-  if (autoClusterMarkers) {
-    clusterMarkers(
-      markers,
-      clusters,
-      autoClusterMarkersDistanceMeters,
-      clusterView
-    );
-  }
+  const { clusters, unClusteredMarkers } = React.useMemo(() => {
+    if (autoClusterMarkers) {
+      const { clusters, unClusteredMarkers } = clusterMarkers(
+        markers,
+        autoClusterMarkersDistanceMeters,
+        clusterView
+      );
+
+      return { clusters: clusters.concat(manualClusters), unClusteredMarkers };
+    } else {
+      return { clusters: manualClusters, unClusteredMarkers: markers };
+    }
+  }, [
+    autoClusterMarkers,
+    autoClusterMarkersDistanceMeters,
+    markers,
+    manualClusters,
+    clusterView,
+    clusterMarkers,
+  ]);
 
   const memoizedMapView = useDeepCompareMemo(
     () => (
@@ -290,31 +310,16 @@ const MapViewF = <T extends object>({
         initialCamera={camera}
         loadingEnabled={loadingEnabled}
         onRegionChange={setCurrentRegion}
-        onTouchStart={() => {
-          if (disableTrackViewChangesWhenPanning) {
-            setMarkerTracksViewChanges(false);
-          }
-        }}
-        onTouchEnd={() => {
-          if (disableTrackViewChangesWhenPanning) {
-            setMarkerTracksViewChanges(true);
-          }
-        }}
         onPress={(event) => {
           const coordinate = event.nativeEvent.coordinate;
           onPress?.(coordinate.latitude, coordinate.longitude);
         }}
         style={[styles.map, style]}
         {...rest}
       >
-        {markers.map((marker, index) =>
+        {unClusteredMarkers.map((marker, index) =>
           renderMarker(
-            {
-              ...marker.props,
-              tracksViewChanges: disableTrackViewChangesWhenPanning
-                ? markerTracksViewChanges
-                : undefined,
-            },
+            marker.props,
             index,
             getMarkerRef(getMarkerIdentifier(marker.props)),
             () => dismissAllOtherCallouts(getMarkerIdentifier(marker.props))
@@ -333,13 +338,7 @@ const MapViewF = <T extends object>({
           }}
         >
           {clusters.map((cluster, index) => (
-            <React.Fragment key={index}>
-              {React.cloneElement(cluster, {
-                tracksViewChanges: disableTrackViewChangesWhenPanning
-                  ? markerTracksViewChanges
-                  : undefined,
-              })}
-            </React.Fragment>
+            <React.Fragment key={index}>{cluster}</React.Fragment>
           ))}
         </MapMarkerContext.Provider>
 
@@ -357,7 +356,7 @@ const MapViewF = <T extends object>({
       loadingEnabled,
       longitude,
       mapRef,
-      markers,
+      unClusteredMarkers,
       onPress,
       onRegionChange,
       provider,
@@ -366,8 +365,6 @@ const MapViewF = <T extends object>({
       showsCompass,
       style,
       zoom,
-      markerTracksViewChanges,
-      disableTrackViewChangesWhenPanning,
     ]
   );
 

packages/maps/src/components/marker-cluster/MapMarkerCluster.tsx

@@ -9,19 +9,15 @@ import { MapViewContext } from "../MapViewCommon";
 import { flattenReactFragments } from "@draftbit/ui";
 import { MapMarkerContext } from "../MapView";
 
-interface MapMarkerClusterProps {
-  tracksViewChanges?: boolean;
-}
-
 /**
  * Component that clusters all markers provided in as children to a single point when zoomed out, and shows the markers themselves when zoomed in
  * Renders a default component that shows the number of components inside cluster
  *
  * Also accepts MapMarkerClusterView to override the rendered cluster component
  */
-const MapMarkerCluster: React.FC<
-  React.PropsWithChildren<MapMarkerClusterProps>
-> = ({ children: childrenProp, tracksViewChanges }) => {
+const MapMarkerCluster: React.FC<React.PropsWithChildren> = ({
+  children: childrenProp,
+}) => {
   const { region, animateToLocation } = React.useContext(MapViewContext);
 
   const children = React.useMemo(
@@ -79,18 +75,18 @@ const MapMarkerCluster: React.FC<
                   longitude,
                   children: clusterView,
                   onPress,
-                  tracksViewChanges,
+                  tracksViewChanges:
+                    clusterView.type === DefaultMapMarkerClusterView
+                      ? false
+                      : clusterView.props.tracksViewChanges,
                 })}
               </MapMarkerClusterContext.Provider>
             );
           }}
         >
           {markers.map((marker, index) =>
-            renderMarker(
-              { ...marker.props, tracksViewChanges },
-              index,
-              getMarkerRef(marker.props),
-              () => onMarkerPress(marker.props)
+            renderMarker(marker.props, index, getMarkerRef(marker.props), () =>
+              onMarkerPress(marker.props)
             )
           )}
         </MarkerClusterer>

packages/maps/src/components/marker-cluster/MapMarkerClusterView.tsx

@@ -7,6 +7,7 @@ interface MapMarkerClusterViewProps {
   zoomOnPress?: boolean;
   onPress?: (latitude: number, longitude: number) => void;
   renderItem?: ({ markerCount }: { markerCount: number }) => JSX.Element;
+  tracksViewChanges?: boolean;
   style?: StyleProp<ViewStyle>;
 }