react-native-maps: Map randomly resetting position on render / onRegionChange triggered multiple times on loading

As per title, the map is randomly resetting the position to your current country zoomed out during initial (or next) render.

During rendering onRegionChange is always called 4 times and then onRegionChangeComplete.

It’s funny that both cases, when it works and when it doesn’t work, the console log is the same and onRegionChange is always passing the same region.

Check the first screenshot is correct, the second is wrong.

In my situation I’m living in London, but I set my simulator to have a location in Zurich. We tested this and it happens the same with someone in Zurich, when it doesn’t work it will change the region to the entire Switzerland zoomed out.

<MapView
  region={this.props.region}
  onRegionChangeComplete={region => this.props.changeRegion(region)}

I’ve tried also with initialRegion and a mix of followUserLocation and showsUserLocation but doesn’t make any difference.

How can I workaround this? Some ugly setTimeout() ? Any other advice?

Thank you 😄

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 20
Comments: 17 (1 by maintainers)

Most upvoted comments

Confirmed, it works with onMapReady and remove it from componentDidMount()

          onMapReady={() => {
            this.setState({ regionSet: true });
          }}

+14

mtt87 on Aug 10, 2017

@mtt87 sure. It looks something like this:

state = {
  regionSet: false,
}

componentDidMount() {
  navigator.geolocation.
    getCurrentPosition(position => {
      const { latitude, longitude } = position.coords
      const region = {
        ...this.state.region,
        latitude,
        longitude
      }
      this.setState({ region, regionSet: true })
    })
}

onRegionChange = (region) => {
  if (!this.state.regionSet) return;
  this.setState({
    region
  });
}

dabit3 on May 26, 2017

Changing my region with both animateToCoordinate() and by manual dragging. Region changes are quite choppy with iOS11. I have tried many variations, best seems to update a local variable using onRegionChangeComplete() and then dispatch it with redux on onMapReady(). But to be honest… still choppy and unusable for production. Anyone knows what is the best practice for this? It’s almost as if onRegionChangeComplete is called too early on and my map moves back to an earlier state if that makes sense – also opened this ticket on stackoverflow: https://stackoverflow.com/questions/46371596/react-native-maps-with-redux-choppy-region-changes

kardolus on Sep 22, 2017

Has anyone solved this issue? @mtt87’s fix works, however if a user pans it will still reset to the last region set in the state. onPanDrag doesn’t trigger, so there is no way to detect if it was the user changing the region, or the system randomly triggering the reset.

samschooler on Jul 12, 2017

I’ve had a similar problem and I think @mtt87’s real issue here is writing region={this.props.region}. You may want to bind props.region to initialRegion instead.

lone-cloud on Sep 30, 2017