onRegionChangeComplete function calling multiple times using react native maps

Question

i want to changes my initial region when move some position in map, i used onRegionChangeComplete functionality for that but it is calling twice or trice at a time.

Here is my code:

onRegionChangeComplete(region) {
    if(!this.state.initialRegionChange){
      console.log("changeRegion:"+JSON.stringify(region))
      var initialRegion = {
        latitude: region.latitude,
        longitude :region.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }
      var lat = parseFloat(region.latitude)
      var lang = parseFloat(region.longitude)
    }else{
      this.setState({
        initialRegionChange:false
      })
    }
  }

render(){
  return(
    <MapView
          ref="map"
          style={styles.map}
          initialRegion={this.state.region}
          provider={MapView.PROVIDER_DEFAULT}
          zoomEnabled={true}
          onRegionChangeComplete={this.onRegionChangeComplete.bind(this)}
          pitchEnabled={true}
          showsCompass={true}
          showsBuildings={true}
          showsUserLocation={true}
          showsTraffic={true}
          showsIndoors={true}
          />
    )
}

please give me suggestions that how to resolve this issue.

Any help much appreciated.

here is module link which i am following. https://github.com/react-community/react-native-maps

Answer 1

This may be an old question but I'll provide what worked for me for reference. In my case it was just that the precision of the region changed onRegionChangeComplete, which made the map think the region had been changed. To fix this I simply compared the input region to the previously set region, but limiting the decimals of the coordinates to 6 in the comparison. Something like this:

onRegionChange = (region) => {
    if(region.latitude.toFixed(6) === this.state.region.latitude.toFixed(6)
      && region.longitude.toFixed(6) === this.state.region.longitude.toFixed(6)){
        return;
    }

    this.setState({region});
}

Answer 2

Use react-native-maps version => v0.28.0, this issue not there in iOS,

For android :-

onRegionChangeComplete is called once when the region changes, such as when the user is done moving the map. The second parameter is an object containing more details about the move. isGesture property indicates if the move was from the user (true) or an animation (false). Note: isGesture is supported by Google Maps only.

onRegionChangeComplete={(region, gesture) => {
              if (Platform.OS === 'android') {
                if (gesture.isGesture) {
                  onRegionChange(region);
                }
              } else {
                onRegionChange(region);
              }
            
          }}

Answer 3

This is a documented issue with react-native-maps and there is even a pull request submitted to fix it: https://github.com/react-community/react-native-maps/pull/1597. You could either merge the pull request into your local copy of react-native-maps right now, or wait for it to be released. I would recommend adding your support to the PR to bring more attention to it and get it merged faster. I know it's not a solution to your question, but there's nothing you can do in your source code at the moment to fix it - you need the library itself to change. Hope this helps!