onRegionChange / onRegionChangeComplete not firing in react-native-maps


I am using react-native-maps and facing an issue where none of the MapView events are firing — including:

  • onRegionChange

  • onRegionChangeStart

  • onRegionChangeComplete

  • onPress

  • onPanDrag

This happens even though the map renders correctly and can be panned/zoomed.

Environment

  • react-native: 0.80.1

  • react-native-maps: 1.23.2 or 1.26.0 (tried both versions)

  • Platform: Android

Expected behavior

When the user drags or zooms the map, onRegionChange / onRegionChangeComplete should fire.

Code Snippet

import React, { useCallback, useRef } from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

const DEFAULT_REGION = {
  latitude: 19.076,
  longitude: 72.8777,
  latitudeDelta: 0.05,
  longitudeDelta: 0.05,
};

export default function MapEventIssue() {
  const mapRef = useRef(null);

  const onRegionChange = useCallback(region => {
    console.log('onRegionChange', region);
  }, []);

  const onRegionChangeComplete = useCallback(region => {
    console.log('onRegionChangeComplete', region);
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        ref={mapRef}
        style={styles.map}
        provider={Platform.OS === 'ios' ? PROVIDER_GOOGLE : undefined}
        initialRegion={DEFAULT_REGION}
        onRegionChange={onRegionChange}
        onRegionChangeComplete={onRegionChangeComplete}
      />

      {/* Center pin overlay */}
      <View
        pointerEvents="box-none"
        collapsable={false}
        style={[
          styles.pinContainer,
          Platform.OS === 'android' && styles.pinContainerAndroid,
        ]}
      >
        <View style={styles.pin} pointerEvents="none" />
      </View>
    </View>
  );
}

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

  pinContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
  },

  // Android-specific overlay
  pinContainerAndroid: {
    position: 'absolute',
    width: 48,
    height: 48,
    left: '50%',
    top: '50%',
    marginLeft: -24,
    marginTop: -24,
  },

  pin: {
    width: 32,
    height: 32,
    marginTop: -24,
    borderRadius: 16,
    borderWidth: 3,
    borderColor: '#1976D2',
    backgroundColor: '#fff',
    elevation: 4,
  },
});
1
Jan 30 at 8:03 AM
User AvatarMOHAK
#javascript#android#ios#react-native#react-native-maps

No answer found for this question yet.