[iOS] [MapView] Make the region prop only an initial region

[jedlau]

Use case: Annotations are displayed on a map, and the initial map region is set so that all of the annotations are visible. Annotations are moving around, which triggers re-renders. In addition, the user should be able to pan/zoom around the map, so onRegionChange and onRegionChangeComplete attempt to capture region changes and set those in the state; in this way, the map region doesn't reset to the initial map region whenever a re-render occurs.

render: function() {
   ...
    return (
      <MapView
        style={styles.map}
        region={this.state.region}
        annotations={annotations}
        showsPointsOfInterest={false}
        onRegionChange={this.onRegionChange}
        onRegionChangeComplete={this.onRegionChangeComplete}
      />
    );
  },

  onRegionChange: function(region) {
    this.setState({ region });
  },

  onRegionChangeComplete: function(region) {
    this.setState({ region });
  },

Problem: Setting the updated region in the state doesn't allow for a smooth panning/scrolling experience on the map, due to the delay in updating the state. After a couple of pans or zooms, the map freezes, presumably because it is using the current region saved in the state, and not a more updated region. Wait 1-2 seconds, and the map can be panned/zoomed again, presumably because the region has now been updated in the state.

Suggestion: Make the MapView's region prop an initial region. That way, only annotation updates trigger re-renders. onRegionChange and onRegionChangeComplete can then be used as delegate methods to perform work on the new region (analogous to MKMapViewDelegate's mapView:regionWillChangeAnimated:), rather than saving the region itself for the purposes of map rendering.

[facebook-github-bot]

Hey jedlau, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[pedro]

+1, having the same issue – if I use onRegionChange to save the current region and feed that back into the <MapView> things get super slow/broken.

[charpeni]

I would recommend you to use react-native-maps as it is more feature-complete than our internal implementation.

[charpeni]

@facebook-github-bot bugfix

[charpeni]

@facebook-github-bot close

[facebook-github-bot]

Hey @jedlau, we're a small team and rely on the community to fix issues that don't affect fb apps. If you're sure this is a bug can you send a pull request with a fix?

[charpeni]

@facebook-github-bot close

[ghost]

@charpeni tells me to close this issue. If you think it should still be opened let us know why.