CODEWITHSUNDEEP
javascriptreact-nativereact-native-maps
Hussian Shaik
Hussian Shaik

Reputation: 2693

onRegionChangeComplete function calling multiple times using react native maps

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.

Upvotes: 7

Views: 8308

Answers (3)

jamal
jamal

Reputation: 1105

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

Upvotes: 4

Mattias
Mattias

Reputation: 1131

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

Upvotes: 11

Parker Ziegler
Parker Ziegler

Reputation: 1010

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!

Upvotes: 1

Related Questions