Refactor tracksViewChanges and allow disable using prop

draftbit · Oct 12, 2023 · 90164fa · 90164fa
1 parent 9823353
commit 90164fa
Showing 1 changed file with 25 additions and 15 deletions.
diff --git a/packages/maps/src/components/MapView.tsx b/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,
@@ -74,7 +78,7 @@ const MapViewF = <T extends object>({
   mapRef: React.RefObject<MapViewComponent>;
 }) => {
   const [markerTracksViewChanges, setMarkerTracksViewChanges] =
-    React.useState(false);
+    React.useState(true);
   const [currentRegion, setCurrentRegion] = React.useState<Region | null>(null);
   const delayedRegionValue = useDebounce(currentRegion, 300);
 
@@ -242,18 +246,6 @@ const MapViewF = <T extends object>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [delayedRegionValue]);
 
-  React.useEffect(() => {
-    setMarkerTracksViewChanges(true);
-
-    const timeout = setTimeout(() => {
-      setMarkerTracksViewChanges(false);
-    }, 100);
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [currentRegion]);
-
   const markers = React.useMemo(
     () => getChildrenForType(MapMarker),
     [getChildrenForType]
@@ -298,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);
@@ -307,7 +309,12 @@ const MapViewF = <T extends object>({
       >
         {markers.map((marker, index) =>
           renderMarker(
-            { ...marker.props, tracksViewChanges: markerTracksViewChanges },
+            {
+              ...marker.props,
+              tracksViewChanges: disableTrackViewChangesWhenPanning
+                ? markerTracksViewChanges
+                : undefined,
+            },
             index,
             getMarkerRef(getMarkerIdentifier(marker.props)),
             () => dismissAllOtherCallouts(getMarkerIdentifier(marker.props))
@@ -328,7 +335,9 @@ const MapViewF = <T extends object>({
           {clusters.map((cluster, index) => (
             <React.Fragment key={index}>
               {React.cloneElement(cluster, {
-                tracksViewChanges: markerTracksViewChanges,
+                tracksViewChanges: disableTrackViewChangesWhenPanning
+                  ? markerTracksViewChanges
+                  : undefined,
               })}
             </React.Fragment>
           ))}
@@ -358,6 +367,7 @@ const MapViewF = <T extends object>({
       style,
       zoom,
       markerTracksViewChanges,
+      disableTrackViewChangesWhenPanning,
     ]
   );