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}
    />
  )
}

Here is the module I am following.

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}
    />
  )
}

Here is the module I am following.

• javascript
• react-native
• react-native-maps

• You can Handle it through Logic . Define some Particular Radius or distance . So your onRegionChangeComplete will not working twice or thrice – Syed Zain Ali Commented Dec 27, 2017 at 18:17

3 Answers 3

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});
}

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);
              }
            
          }}

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!