Cluster markers flikkering with Google map (Android & iOS)

[Robspin]

ScreenRecording_01-30-2025.11-52-11_1.mp4

I am currently experiencing this bug when using the marker clusterer and zooming.
It seems to appear only when using the google map.

I created a new project with the reproducible code here:

https://github.com/Robspin/expo-react-native-cluster-example/blob/master/app/(tabs)/index.tsx

I tried using your example code, if I am doing something wrong please let me know.

This issue is possibly related to #42, however he is experiencing it on the apple map which in my case this the issue is not present.
However the cluster marker on the google map does seem to flikker(rerender) on the changing of the id as mentioned in this issue.

I would appreciate any tips and responses as I would like to use this marker clusterer in a production app.

[chinuu-2001]

@Robspin did you find any solution to this issue?

[Robspin]

@Robspin did you find any solution to this issue?

Unfortunately not.

[chinuu-2001]

Use this prop tracksViewChanges={false} to Marker @Robspin

[Robspin]

@chinuu-2001
That prop is already present which you can see in the code I linked in my original post.

[BE-CH]

@Robspin Any solution to this by now? I am experiencing the same

[Robspin]

@BE-CH
The issue is still present. We currently accept the behavior.
But I hope we can find a cleaner solution in the future.

[rdhox]

Hey, I may have find a solution (work for me on IOS, haven't try on Android yet):
The problem seems to come from the usage of the "useMemo" hook inside the useClusterer hook or the Clusterer component.
useMemo in React act like a useState and a useEffect, but in reality, it's not really the same (lot of articles about it).

Try to create a custom component like that:

import React, {
  ReactElement,
  useEffect,
  Fragment,
  useState,
} from "react";
import SuperclusterClass from "react-native-clusterer";
import type Supercluster from "../types/supercluster";
import type { MapDimensions, Region } from "../types/supercluster";

export interface ClustererProps<
  P extends Supercluster.AnyProps,
  C extends Supercluster.AnyProps
> {
  data: Array<Supercluster.PointFeature<P>>;
  mapDimensions: MapDimensions;
  region: Region;
  renderItem: (
    item: Supercluster.PointOrClusterFeature<P, C>,
    index: number,
    array: Supercluster.PointOrClusterFeature<P, C>[]
  ) => React.ReactElement;
  options?: Supercluster.Options<P, C>;
  getSelectedPoints?: (
    points: Supercluster.PointOrClusterFeature<P, C>[]
  ) => void;
}

export function CustomClusterer<
  P extends Supercluster.AnyProps,
  C extends Supercluster.AnyProps
>({
  data,
  options,
  region,
  mapDimensions,
  renderItem,
}: ClustererProps<P, C>): ReactElement {


  const [superclusterInstance, setSuperclusterInstance] = useState<
    SuperclusterClass<Supercluster.AnyProps, Supercluster.AnyProps> | undefined
  >(undefined);

  const [points, setPoints] = useState<
    Supercluster.PointOrClusterFeature<P, C>[]
  >([]);

  useEffect(() => {
    if (data.length > 0) {
      const supercluster = new SuperclusterClass(options).load(data);
      setSuperclusterInstance(supercluster);
    }
  }, [data, data.length, options]);

  useEffect(() => {
    if (!superclusterInstance) {
      setPoints([]);
    } else {
      const newPoints = superclusterInstance?.getClustersFromRegion(
        { ...region },
        mapDimensions
      );
      setPoints(newPoints as Supercluster.PointOrClusterFeature<P, C>[]);
    }
  }, [
    superclusterInstance,
    region.latitude,
    region.longitude,
    region.latitudeDelta,
    region.longitudeDelta,
    mapDimensions.width,
    mapDimensions.height,
  ]);

  return <Fragment>{points.map(renderItem)}</Fragment>;
}

Work for me :)