'onRegionChange' called long after changes has stopped

[Tobjoern]

Summary

When moving around the map, i.e. zooming or just moving vertically or horizontally, the 'onRegionChange' method is called.
However, it's called way too long after the actual movement has stopped.
Example: I move a few meters to the left, the 'onRegionChange' method is called about 30 times, with the last result being about 4s after I stopped moving.
The problem is, each of those events actually has a different bounding box + zoom.
This is particularly concerning, when using a clustering library, which depends on those variables, to render properly, as this can lead to serious rendering issues, where it takes a long time for the clusters to change properly.

Reproducible sample code

import React, { useRef } from "react";
import type { Region } from "react-native-maps";
import MapView from "react-native-maps";

type BBox = [number, number, number, number];

export default function App() {
	const mapRef = useRef<MapView>(null);

	const regionToBoundingBox = (region: Region): BBox => {
		let lngD: number;
		if (region.longitudeDelta < 0) lngD = region.longitudeDelta + 360;
		else lngD = region.longitudeDelta;

		return [
			region.longitude - lngD,
			region.latitude - region.latitudeDelta,
			region.longitude + lngD,
			region.latitude + region.latitudeDelta,
		];
	};

	return (
		<MapView
			style={{ flex: 1 }}
			initialRegion={{
				latitude: 42,
				longitude: 30,
				latitudeDelta: 1,
				longitudeDelta: 1,
			}}
			onRegionChange={async (region) => {
				const camera = await mapRef.current?.getCamera();
				// camera.
				const zoom = camera?.zoom ?? 10;

				console.log(`On Region change (zoom: ${zoom})`);

				const mapBoundsFirst = regionToBoundingBox(region);
				console.log(mapBoundsFirst);
			}}
		/>
	);
}

Steps to reproduce

Move around the map, zoom-in, zoom-out.

Expected result

It makes sense, that the 'onRegionChange' is called continuously, however I would expect it to stop being called, as soon as the user stops moving. Even the 'onRegionChangeComplete' is only called 3s+ after the user stopped moving.

Actual result

There is a significant delay in the call-times.

React Native Maps Version

1.13.0

What platforms are you seeing the problem on?

Android, iOS (Google Maps)

React Native Version

0.72.10

What version of Expo are you using?

SDK 48

Device(s)

Galaxy S20+ Android 13, iPhone SE 2020 iOS 16.6

Additional information

No response

[mateki0]

Hi @Tobjoern, do you have any fps drops while seeing this issue? Can you turn on "Perf monitor" and post a video here? I'm asking because in clean project with stable 60fps this bug doesn't exist

[salah-ghanim]

@Tobjoern thanks for reporting this, here are my thoughts:

1. try to use the latest library version since it supports Fabric by default this should lead to better performance in general.
2. the callback for onRegionChange for both android and iOS is rather simple, we don't have much control over it's trigger or delay it.
3. does the issue happen on all devices? android / iOS ? might be a device limitation (even google map sdk alone can be slow on some old android devices).
4. you can always introduce a smoothing algorithm to handle noisy output for your clustering library.

I'm closing this ticket as out of scope now