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(<MapViewstyle={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.
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
onRegionChangeandonRegionChangeCompleteattempt 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.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
regionprop an initial region. That way, only annotation updates trigger re-renders.onRegionChangeandonRegionChangeCompletecan then be used as delegate methods to perform work on the new region (analogous to MKMapViewDelegate'smapView:regionWillChangeAnimated:), rather than saving the region itself for the purposes of map rendering.