onRegionChangeComplete() not executing on Android on initial map load #5645
Description
Summary
onRegionChangeComplete() is not executing on Android after an onRegionChange() event fires on the initial map load. If a drag event occurs, it does execute at that point. On iOS, however, onRegionChangeComplete() executes after the initial map load (without any user drag event).
So this is an inconsistency between the two platforms. We are relying on the onRegionChangeComplete() to execute on the initial load so that a map pin will animate down to its starting position (which typically happens after onRegionChange() executes). Subsequent user map drag events properly move the pin down because onRegionChangeComplete() is firing after the user drags the map.
One thing to note in the test example below: on Android, onRegionChange() fires, and then onRegionChangeComplete() never fires. On iOS, however, onRegionChange() is never logged initially, but onRegionChangeComplete() is. This is different from our production app, where both platforms initially fire onRegionChange(), but only iOS then fires a subsequent onRegionChangeComplete().
Reproducible sample code
import React from 'react';
import {Dimensions, StatusBar, StyleSheet, View} from 'react-native';
import MapView, {
MapMarker,
Marker,
Polygon,
PROVIDER_GOOGLE,
} from 'react-native-maps';
const screenDimensions = Dimensions.get('screen');
function App(): React.JSX.Element {
const markerRef = React.useRef<MapMarker>(null);
return (
<View style={styles.container}>
<StatusBar />
<View style={styles.mapContainer}>
<MapView
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
onRegionChange={() => {
console.log('onRegionChange...');
}}
onRegionChangeComplete={() => {
console.log('onRegionChangeComplete...');
}}
showsUserLocation={true}
showsMyLocationButton={false}
userInterfaceStyle="light"
provider={PROVIDER_GOOGLE}
style={styles.map}>
<Marker
coordinate={{latitude: 37.78825, longitude: -122.4324}}
title="My Marker"
description="This is a marker example"
ref={markerRef}
/>
<Polygon
coordinates={[
{latitude: 37.78825, longitude: -122.4324},
{latitude: 37.78925, longitude: -122.4334},
{latitude: 37.79025, longitude: -122.4314},
{latitude: 37.79075, longitude: -122.4304},
{latitude: 37.78975, longitude: -122.4294},
{latitude: 37.78875, longitude: -122.4304},
{latitude: 37.78825, longitude: -122.4324},
]}
strokeColor="#000"
fillColor="rgba(0, 0, 255, 0.3)"
strokeWidth={2}
/>
</MapView>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
},
mapContainer: {
...StyleSheet.absoluteFillObject,
height: screenDimensions.height,
width: screenDimensions.width,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'yellow',
},
});
export default App;Steps to reproduce
Load the app. Attach the debugger window so that you can observe the logs.
Reload the app so that you can get fresh clean logs.
You will notice that on Android, onRegionChangeComplete() never initially executes (even though onRegionChange() does).
However, on iOS, onRegionChangeComplete() does execute after onRegionChange().
Expected result
onRegionChangeComplete() should execute on Android on the initial map load, after onRegionChange() (FYI we are using initialRegion to set the region). The same thing happens when using region instead.
Actual result
onRegionChangeComplete() does not fire at all on Android on the initial load (even though onRegionChange() executes first).
React Native Maps Version
1.24.10
What platforms are you seeing the problem on?
Android
React Native Version
0.79.5
What version of Expo are you using?
Not using Expo
Device(s)
Samsung Galaxy S21
Additional information
No response