[iOS][Android] Marker rendering issues

[lucksp]

I have been using earlier version for over a year with no issues. Recently, I am upgrading my app to:

    "expo": "^53.0.20",
    "react-native": "0.79.5",
    "react-native-map-clustering": "^4.0.0",
    "react-native-maps": "1.20.1",

And running into some issues:

iOS:

• markers do not all render on the initial load of the map & data for markers. If I fitToCoordinates(data) or manually move the map, then the markers load. Video:

ScreenRecording_08-08-2025.17-17-45_1.mov

• App crashes when re-rendering markers, at random but still a lot, after adding new data from a form, navigating back, and re-fetching data to get the update.

Android:

• Not all markers & clusters are rendered. My location should have a cluster of 2 markers.

now, zoomed in you can see the 2 markers:

• Also Markers are cutoff

  useEffect(
    function fitMarkers() {
      if (dataCoords?.length && !hasAutoFitted) {
        mapRef.current?.fitToCoordinates(dataCoords, {
          edgePadding: {
            top: insets.top,
            right: Platform.select({ ios: 8, android: 40 }) || 8,
            left: Platform.select({ ios: 8, android: 40 }) || 8,
            bottom: height * 0.5,
          },
        });
        setHasAutoFitted(true);
      }
    },
    [dataCoords, hasAutoFitted, insets.top]
  );



<ClusterMap
        clusterColor={colors.main.default}
        initialRegion={INITIAL_REGION}
        mapPadding={{
          top: insets.top,
          right: 16,
          left: 16,
          bottom: insets.bottom,
        }}
        mapRef={ref => {
          mapRef.current = ref as MapView | null;
        }}
        mapType={'terrain'}
        provider={Platform.OS === 'android' ? PROVIDER_GOOGLE : undefined}
        showsMyLocationButton
        showsUserLocation
        style={[StyleSheet.absoluteFill]}
      >
        {data?.map(datum => {
          const { location } = (datum.location as unknown as Result).geometry;
          if (!location) return;
          return (
            <Marker
              coordinate={{ latitude: location.lat, longitude: location.lng }}
              identifier={datum.id}
              key={datum.id}
              onPress={() => handleClickedMarker(datum.id)}
            >
              <MapPinIcon
                color={colors.main.default}
                fill={colors.background}
                height="40"
                width="40"
              />
            </Marker>
          );
        })}
      </ClusterMap>

Seems related to the newer React Native, architecture too?

[walker-mick]

Also seeing this same issue:

"react-native-map-clustering": "^4.0.0",
"react-native-maps": "^1.20.1",
"expo": "~53.0.20",
"react-native": "0.79.5",

[milosoria]

I'm also seeing this with:

"react-native-map-clustering": "^4.0.0",
"react-native-maps": "1.20.1",
"expo": "^53.0.0",
"react-native": "0.79.5",

EDIT: i believe the problem is related to "react-native-maps" and not with this library. Specifically, it has to do with rendering on the new RN architecture. You can disable it in the app.json, using:

"android": {
    "newArchEnabled": false,
    "experimental": {
        "enableFabricRenderer": false
    }
}

I've disabled it for android, since it was never a problem on IOS and it is now working as it used to, without having to downgrade back to expo 51.

It looks like there is a PR with a fix for this but it does not look like it is getting merged any time soon.

[AndrianarivoAlpha]

same issue!
expo 53

[sjyamas]

App crashes when re-rendering markers, at random but still a lot, after adding new data from a form, navigating back, and re-fetching data to get the update.

how did you fix this