iOS Development

javascript – Marker not rendering on first map faucet — solely seems after second faucet, zoom, or any interplay (Expo SDK 53, RN 0.79.5, react-native-maps 1.20.1)

28 July 2025

I am encountering a wierd habits with the Marker element in react-native-maps when including markers dynamically.

After I faucet the map after including a marker to the editingMarkers state, the principalMarker (the inexperienced one representing the most recent tapped level) would not seem instantly.

But when I do any interplay afterward — zoom, pan, faucet once more, open the FAB menu, and many others. — then the marker instantly renders as anticipated.

It looks like the primary render is being ignored or delayed till a facet interplay 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 = (occasion: MapPressEvent) => {
  setPrincipalMarker({
    latitude: occasion.nativeEvent.coordinate.latitude,
    longitude: occasion.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) {
    // That 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((level) => (
    
  ))}

Anticipated

As quickly as I set principalMarker, it ought to render immediately.

Precise

It would not render till one other interplay occurs.

Tried thus far

Verified the state updates with console.log
Confirmed principalMarker has right coordinates
Pressured re-renders with unfold ({ ...marker }) or cloning arrays
Tried calling setTimeout(() => setPrincipalMarker(...), 0)
Tried mapRef.present?.forceUpdate();

Questions

Is that this a bug with react-native-maps 1.20.1 or a quirk with React 19 / Expo SDK 53?
Is there any identified workaround to power the marker to render on first map press?
Anybody skilled comparable points or discovered a dependable repair?

Thanks prematurely 🙏