CODEWITHSUNDEEP
react-nativemaps
Dante Cervantes
Dante Cervantes

Reputation: 313

onRegionChangeComplete is called too many times, and not when really the event ends

This method is called when i not ended to pinch the map, is there anyway to fix this?

https://i.sstatic.net/GHQNc.jpg

Here is the code

<MapView
    style={{flex:1}}
    region={{
    latitude: parseFloat(this.state.initialPosition.coords.latitude),
        longitude: parseFloat(this.state.initialPosition.coords.longitude),
    latitudeDelta,
    longitudeDelta,
    }}
    showsUserLocation={true}
    onRegionChangeComplete={(region) => {
         console.log('onRegionChangeComplete called!');
    }}
/>

Upvotes: 0

Views: 1433

Answers (4)

johelder
johelder

Reputation: 41

For future readers, I combined setTimeout with useRef, to resolve this. Here my code snippet

...
import { useRef } from 'react';
import type { Region } from 'react-native-maps';

...

const regionChangeTimeoutId = useRef(0);

function onTouchStart() {
  clearTimeout(regionChangeTimeoutId.current);
}

function onRegionChangeComplete(region: Region) {
  regionChangeTimeoutId.current = setTimeout(() => {
  // do something
  }, 2000);
}

...
<MapView
  onTouchStart={onTouchStart}
  onRegionChangeComplete={onRegionChangeComplete}
  ...
/>

Upvotes: 1

T&#226;n L&#234;
T&#226;n L&#234;

Reputation: 1

i just solve it by making setTimeout! here is my code:

const allowChangeRegion = React.useRef(false);
  React.useEffect(() => {
    const timeout = setTimeout(() => {
      console.log('set allowRegion = true');
      allowChangeRegion.current = true;
    }, 2000);
    return () => {
      if (timeout) {
        clearTimeout(timeout);
        console.log('set allowRegion = false');
        allowChangeRegion.current = false;
      }
    };
  }, []);

<MapView
        provider="google"
        style={styles.map}
        mapType="standard"
        showsIndoorLevelPicker
        showsUserLocation
        showsMyLocationButton
        region={props.region}
        onRegionChangeComplete={(region, detail) => {
          if (allowChangeRegion.current || detail.isGesture) {
            props.onChangeRegion(region);
          }
        }}>
        {}
</MapView>

Hope that can help anyone!

Upvotes: 0

Mohd Shad Mirza
Mohd Shad Mirza

Reputation: 179

Use initialRegion in place of region and it will work fine. Actually when you use region and onRegionChangeComplete together, onRegionChangeComplete works as a callback and gets triggered on every region change which again changes the region. Thus, it goes into an infinite loop. Better use initialRegion with onRegionChangeComplete .

Upvotes: 4

Dante Cervantes
Dante Cervantes

Reputation: 313

i justo solve it making a setTimeout! here is how

<MapView
    style={{flex:1}}
    showsUserLocation={true}
    onRegionChange={(region) => {
        if(this.timeout){
            clearTimeout(this.timeout);
        }
        this.timeout = setTimeout(() => {
                this.getDoctorsByGeolocation(region);
        },1000);
    }}
/>

i hope this can help anyone!

Upvotes: 0

Related Questions