Only setting the initial region on a react-native MapView
<p><em>Use case:</em> Annotations are displayed on a map, using the react-native MapView component. 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 <code>onRegionChange()</code> and <code>onRegionChangeComplete()</code> 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.</p>

<pre><code>render: function() {
  ...
  return (
    &lt;MapView
      region={this.state.region}
      annotations={annotations}
      onRegionChange={this.onRegionChange}
      onRegionChangeComplete={this.onRegionChangeComplete}
    /&gt;
  );
},

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

onRegionChangeComplete: function(region) {
  this.setState({ region });
},
</code></pre>

<p><em>Problem:</em> 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.</p>

<p><em>Question:</em> Is there a way to set the MapView's initial region only, such that a re-render doesn't cause the region to reset? That way, <code>onRegionChange()</code> and <code>onRegionChangeComplete()</code> can 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.</p>