title: react native maps: center marker onPress before Callout is displayed
body: <p>When a user presses on a marker I am calling animateToCoordinate to center the marker in the middle of the screen. The problem is that the callout is rendered to the position of the region before animateToCoordinate is done its animation so the callout is displayed somewhat offscreen. is there anyway to delay callout display until animateToRegion is finished? Or is there another way to go about this entirely that I am not seeing?</p>
  
  <pre><code> &lt;MapView
      ref = {(mapView) =&gt; { _mapView = mapView; }}
      style={styles.map} 
      region={this.state.mapRegion}
      showsUserLocation = {true}
      showsMyLocationButton   = {true}
      followUserLocation={true}
      onRegionChange={this.onRegionChange.bind(this)}&gt;
  
  
   {data.near.map(marker =&gt; 
     {if(marker.posts.length != 0){
       return (
        &lt;MapView.Marker
        coordinate={{latitude: marker.location.latitude,
              longitude: marker.location.longitude}}
        title={marker.name}
        description={marker.description}
        onPress={ e =&gt; _mapView.animateToCoordinate({
          latitude: e.nativeEvent.coordinate.latitude,
          longitude:  e.nativeEvent.coordinate.longitude
        }, 500)}
        onCalloutPress={ e =&gt; this._onPressItem(marker.id)}
      &gt;
      &lt;Icon name="ios-pin" style={{ fontSize: 45, color: '#f04c34'}} /&gt;
  
      &lt;MapView.Callout 
              style={{ flex: -1, position: 'absolute', width: width}}&gt;
      &lt;ListItem &gt;
  
      &lt;Body &gt;
          &lt;View style={{flex: 1,
          flexDirection: 'row',
          justifyContent: 'space-between',}}&gt;
      &lt;Text style={{fontSize: 18, color: '#38383a', marginBottom: 10, fontWeight: 'bold'}} 
      &gt;{marker.name}&lt;/Text&gt;
  
      &lt;Text style={{fontSize: 14, color: '#38383a', fontWeight: 'bold'}}&gt;{marker.distance.toFixed(2)} miles&lt;/Text&gt;
  &lt;/View&gt;
      &lt;Text style={{fontSize: 16,  fontFamily: 'Avenir', marginBottom: 15}}
      &gt;{marker.infoText}&lt;/Text&gt;
  
      &lt;Text&gt;
      &lt;Text style={{fontSize: 12, color: '#38383a', fontWeight: 'bold'}}
      &gt;{marker.address}&lt;/Text&gt;
  
      &lt;/Text&gt;
  
          &lt;/Body&gt;
          &lt;Right&gt;&lt;/Right&gt;
  
  
  
  
  &lt;/ListItem&gt;
    &lt;/MapView.Callout&gt;
      &lt;/MapView.Marker&gt;
       )
     }else return null;
  
     })}
    &lt;/MapView&gt;
  </code></pre>