Fix Maps flickering issue with clustering (#874)

* Add unique key to clusters to prevent excessive animaitons

* Use debounced value for context region

* Less debounce value + remove tracks view changes

* Revert tracks view changes

Author: YoussefHenna

packages/maps/src/components/MapView.tsx

@@ -75,6 +75,7 @@ const MapViewF = <T extends object>({
 }) => {
   const [currentRegion, setCurrentRegion] = React.useState<Region | null>(null);
   const delayedRegionValue = useDebounce(currentRegion, 300);
+  const contextDelayedRegionValue = useDebounce(currentRegion, 50);
 
   const markerRefs = React.useMemo<
     Map<string, React.RefObject<MapMarkerRefType>>
@@ -372,7 +373,7 @@ const MapViewF = <T extends object>({
     <MapViewContext.Provider
       value={{
         animateToLocation: (location) => animateToLocation(location),
-        region: currentRegion,
+        region: contextDelayedRegionValue,
       }}
     >
       {memoizedMapView}

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

@@ -70,16 +70,19 @@ const MapMarkerCluster: React.FC<React.PropsWithChildren> = ({
                   markerCount: pointCount,
                 }}
               >
-                {renderMarker({
-                  latitude,
-                  longitude,
-                  children: clusterView,
-                  onPress,
-                  tracksViewChanges:
-                    clusterView.type === DefaultMapMarkerClusterView
-                      ? false
-                      : clusterView.props.tracksViewChanges,
-                })}
+                {renderMarker(
+                  {
+                    latitude,
+                    longitude,
+                    children: clusterView,
+                    onPress,
+                    tracksViewChanges:
+                      clusterView.type === DefaultMapMarkerClusterView
+                        ? false
+                        : clusterView.props.tracksViewChanges,
+                  },
+                  `${latitude}-${longitude}-${pointCount}`
+                )}
               </MapMarkerClusterContext.Provider>
             );
           }}