[Bug]: MapView::onCameraChanged() does not trigger

[sssilver]

Mapbox Implementation

Mapbox

Mapbox Version

11.8.0

React Native Version

19.1.0

Platform

iOS

@rnmapbox/maps version

10.1.39

Standalone component to reproduce

import React from "react";
import { StyleSheet, View } from "react-native";
import Mapbox, { MapState } from "@rnmapbox/maps";

Mapbox.setAccessToken(
  "<ACCESS_TOKEN>"
);

const Map: React.FC = () => {
  const handleCameraChanged = (state: MapState) => {
    console.log("Camera changed!");
  };

  return (
    <View style={styles.container}>
      <Mapbox.MapView
        style={styles.map}
        onCameraChanged={handleCameraChanged}
      >
      </Mapbox.MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

export default Map;

Observed behavior and steps to reproduce

handleCameraChanged() is not being called when the map view is being manipulated by either pinching or panning.

Expected behavior

handleCameraChanged() gets called

Notes / preliminary analysis

No response

Additional links and references

No response

[Willham12]

Same issue here but i recognized that the onCamerChanged is called on lower zoom level.

[JPritchard9518]

I had the same issue and found that when I set onDidFinishLoadingMap it started working. An empty function works:

onDidFinishLoadingMap={() => {}}

Not sure why it requires that prop to be set. Hopefully it's a bug that can be fixed, but it's at least calling onCameraChanged for me now.

[JefHellemansBlockbax]

I don't have time to do all the required testing and make a PR right now, but I've managed to fix it with this change in components/MapView.tsx:

_setNativeRef(nativeRef: RNMBXMapViewRefType | null) {
  if (nativeRef != null) {
    this._nativeRef = nativeRef;
+   this._setHandledMapChangedEvents(this.props);
    super._runPendingNativeMethods(nativeRef);
  }
}

In our case, when this._setHandledMapChangedEvents is initially called, this._nativeRef isn't available yet. Because of that, the this._runNativeMethod('setHandledMapChangedEvents', this._nativeRef, [events]) call at the end of _setHandledMapChangedEvents doesn't do anything.

We are currently running a patch, but it would be great to see this fixed properly 🙌

[Sulaiman122]

still issue presist @JefHellemansBlockbax
when i make a rerender after zoom, it get fixed somehow

[traviswimer]

Well, I figured out a hideous workaround if anyone is interested. It seems that setting followUserLocation to true does something to make onCameraChanged start listening.

Of course, you don't necessarily want to follow the user, so you need to quickly change it back to false to prevent this behavior. Anyway here is the workaround:

const { followUserLocation } = props;

const [stupidHack, setStupidHack] = useState(true);
useEffect(() => {
	const timer = setTimeout(() => {
		setStupidHack(false);
	});
	return () => {
		clearTimeout(timer);
	};
}, []);

return (
	<MapView
		onCameraChanged={()=>{
			// ... do something on camera change
		}}
	>
		<Camera
			followUserLocation={stupidHack === true ? true : followUserLocation}
		/>
	</MapView>
);

And yes, you do need to use the setTimeout, which probably isn't reliable, but seems to work for me even with the time set to 0.

Did I mention this workaround is hideous?

[McFly78]

I am having this issue just after upgrading from RN0.74.4 to RN 0.80.2 with new arch activated.
All previous workaround didn't work for me.
Upgrading Mapbox from 10.1.36 to latest 10.1.41 is the same.
So instead I temporarily use deprecated onRegionIsChanging that is still working.

[McFly78]

Another workaround working for me is to replace theses 2 lines by these 3 lines in the function applyOnMapChange() in RNMBXMapView.swift

`func applyOnMapChange() {
self.onEvery(event: .cameraChanged, handler: { (self, cameraEvent) in
self.wasGestureActive = self.isGestureActive
if self.handleMapChangedEvents.contains(.regionIsChanging) {
let event = RNMBXEvent(type:.regionIsChanging, payload: self.buildRegionObject())
self.fireEvent(event: event, callback: self.reactOnMapChange)
} else if self.handleMapChangedEvents.contains(.cameraChanged) {
//let event = RNMBXCameraChanged(type:.cameraChanged, payload: self.buildStateObject(), reactTag: self.reactTag) // removed
//self.eventDispatcher.send(event) // removed
let regionPayload = self.buildRegionObject() //New line
let event = RNMBXEvent(type:.cameraChanged, payload: regionPayload) // New Line
self.fireEvent(event: event, callback: self.onCameraChanged) // New Line

  }
})`

[McFly78]

issue solved for me using latest v10.1.43rc0