How can we get the camera's coordinates as the user pans around the map?

[1mike12]

I must be missing something really obvious, but I thought there would be some kind of prop on Camera like onPanEnd where we can listen for updates as the user pans around the map. The usecase is to use the updated center to do anotehr fetch for annotations on the new map location

[ferdicus]

you are right - it's not on Camera though, but on MapView itself => onRegionDidChange

[1mike12]

One more thing, I'm using functional components and I can't seem to get the coordinates properly. Do you see anything wrong with this?

function myComponent (){

	const ref = useRef(mapRef)
	const [center, setCenter] = useState(null)
	const [pointsOfInterest, setPointsOfInterest] = useState([])

	const regionChange = async ()=> {
		const coordinates = await ref.current.getCenter()
		setCenter(coordinates)
	}

	useEffect(()=> {
		(async ()=> {
			const results = await loadPointsOfInterest(center)
			setPointsOfInterest(results)
		})()
	}, [center])

	return (
		<MapboxGL.MapView
                  style={{flex: 1}}
                  ref={ref}
                  onRegionDidChange={regionChange}
               >
                  <MapboxGL.Camera
                     zoomLevel={14}
                     animationMode={"moveTo"}
                     centerCoordinate={[center.lng,center.lat]}
                  />
       </MapboxGL.MapView>	
	)
}

[naftalibeder]

@1mike12 Check out the reference for onRegionDidChange - you need to use the region arg passed into the callback. So, onRegionDidChange={region => /* use region here */ }.