I’m encountering a strange behavior with the Marker
component in react-native-maps when adding markers dynamically.
When I tap the map after adding a marker to the editingMarkers
state, the principalMarker
(the green one representing the latest tapped point) doesn’t appear immediately.
But if I do any interaction afterward — zoom, pan, tap again, open the FAB menu, etc. — then the marker suddenly renders as expected.
It feels like the first render is being ignored or delayed until a side interaction forces a re-render.
Setup
- Expo SDK:
~53.0.20
- React Native:
0.79.5
- react-native-maps:
1.20.1
Hook & Handlers
const [markersOnEdit, setMarkersOnEdit] = useState([]);
const [principalMarker, setPrincipalMarker] = useState(null);
const handleMapPress = (event: MapPressEvent) => {
setPrincipalMarker({
latitude: event.nativeEvent.coordinate.latitude,
longitude: event.nativeEvent.coordinate.longitude,
});
};
const addNewMarker = () => {
if (!principalMarker) return;
const epsilon = 0.00001;
const alreadyExists = markersOnEdit.some(
(m) =>
Math.abs(m.latitude - principalMarker.latitude) < epsilon &&
Math.abs(m.longitude - principalMarker.longitude) < epsilon
);
if (alreadyExists) {
// This is for forcing rendering
setMarkersOnEdit((prev) => [...prev]);
setPrincipalMarker({ ...principalMarker });
return;
}
const newMarker: EditablePoint = {
id: generateId(),
latitude: principalMarker.latitude,
longitude: principalMarker.longitude,
};
setMarkersOnEdit((prev) => [...prev, newMarker]);
setPrincipalMarker(null);
};
MapView + Marker rendering
{principalMarker !== null && (
)}
{markersOnEdit.map((point) => (
))}
Expected
As soon as I set principalMarker
, it should render instantly.
Actual
It doesn’t render until another interaction happens.
Tried so far
- Verified the state updates with
console.log
- Confirmed
principalMarker
has correct coordinates - Forced re-renders with spread (
{ ...marker }
) or cloning arrays - Tried calling
setTimeout(() => setPrincipalMarker(...), 0)
- Tried
mapRef.current?.forceUpdate();
Questions
- Is this a bug with
react-native-maps
1.20.1 or a quirk with React 19 / Expo SDK 53? - Is there any known workaround to force the marker to render on first map press?
- Anyone experienced similar issues or found a reliable fix?
Thanks in advance 🙏