Add prop to improve performance of MapView (47) (#801)

* Set `tracksViewChanges` prop automatically

* Move out of delayed region and add to useEffect

* Refactor tracksViewChanges and allow disable using prop

* Update snapshots

Author: YoussefHenna

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

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

packages/maps/src/components/MapView.tsx

@@ -42,6 +42,9 @@ 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;
@@ -59,6 +62,7 @@ const MapViewF = <T extends object>({
   loadingEnabled = true,
   autoClusterMarkers = false,
   autoClusterMarkersDistanceMeters = 1000,
+  disableTrackViewChangesWhenPanning = true,
   markersData,
   keyExtractor,
   renderItem,
@@ -73,6 +77,8 @@ 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);
 
@@ -235,6 +241,7 @@ 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]);
@@ -283,6 +290,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);
@@ -292,7 +309,12 @@ const MapViewF = <T extends object>({
       >
         {markers.map((marker, index) =>
           renderMarker(
-            marker.props,
+            {
+              ...marker.props,
+              tracksViewChanges: disableTrackViewChangesWhenPanning
+                ? markerTracksViewChanges
+                : undefined,
+            },
             index,
             getMarkerRef(getMarkerIdentifier(marker.props)),
             () => dismissAllOtherCallouts(getMarkerIdentifier(marker.props))
@@ -311,7 +333,13 @@ const MapViewF = <T extends object>({
           }}
         >
           {clusters.map((cluster, index) => (
-            <React.Fragment key={index}>{cluster}</React.Fragment>
+            <React.Fragment key={index}>
+              {React.cloneElement(cluster, {
+                tracksViewChanges: disableTrackViewChangesWhenPanning
+                  ? markerTracksViewChanges
+                  : undefined,
+              })}
+            </React.Fragment>
           ))}
         </MapMarkerContext.Provider>
 
@@ -338,6 +366,8 @@ const MapViewF = <T extends object>({
       showsCompass,
       style,
       zoom,
+      markerTracksViewChanges,
+      disableTrackViewChangesWhenPanning,
     ]
   );
 

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

@@ -9,15 +9,19 @@ 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> = ({
-  children: childrenProp,
-}) => {
+const MapMarkerCluster: React.FC<
+  React.PropsWithChildren<MapMarkerClusterProps>
+> = ({ children: childrenProp, tracksViewChanges }) => {
   const { region, animateToLocation } = React.useContext(MapViewContext);
 
   const children = React.useMemo(
@@ -75,14 +79,18 @@ const MapMarkerCluster: React.FC<React.PropsWithChildren> = ({
                   longitude,
                   children: clusterView,
                   onPress,
+                  tracksViewChanges,
                 })}
               </MapMarkerClusterContext.Provider>
             );
           }}
         >
           {markers.map((marker, index) =>
-            renderMarker(marker.props, index, getMarkerRef(marker.props), () =>
-              onMarkerPress(marker.props)
+            renderMarker(
+              { ...marker.props, tracksViewChanges },
+              index,
+              getMarkerRef(marker.props),
+              () => onMarkerPress(marker.props)
             )
           )}
         </MarkerClusterer>