[iOS][Android] Marker rendering issues #283
Description
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?