[iOS] [MapView] Make the region prop only an initial region #5130
Description
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.