title: react-native-maps fitToSuppliedMarker/fitToCorodinates does not show all markers
body: <p>i am trying to use simple MapView and display 2 markers. </p>
  
  <p>they both appear correctly on map view but not visible on screen at same time (Image1 rendered by default)</p>
  
  <p>i have to perform manual drag operation before  both markers can be seen on screen.(Image2 after i manually drag map so that they can be seen on screen) </p>
  
  <p>i tried using fitToSuppliedMarkers/fitToCocordinates but nothing seems to work.</p>
  
  <pre><code>export default class FavItemMapView extends Component{
  
  constructor(props){
      super(props)
      this.state={
          position:{
              latitude:1.286353,
              longitude:103.853067,
              latitudeDelta: 0,
              longitudeDelta: 0,
          },
          error:null
      }
      this.mapRef = null;
  }
  
  componentWillMount(){
  
      const favPlaceLatitude = parseFloat(this.props.navigation.state.params.latitude)
      const favPlaceLongitude = parseFloat(this.props.navigation.state.params.longitude)
      markers.push({latitude:favPlaceLatitude,longitude:favPlaceLongitude});
      navigator.geolocation.getCurrentPosition(
          (position) =&gt; {
            console.log("wokeeey" + width + height);
            console.log(position);
            var lat = parseFloat(position.coords.latitude)
            var long = parseFloat(position.coords.longitude)
  
            var initialRegion = {
              latitude: lat,
              longitude: long,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            }
  
            this.onRegionChange(initialRegion)
          },
          (error) =&gt; this.setState({ error: error.message }),
          { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 },
        );
  }
  
  onRegionChange(region) {
      this.setState({ position:region })
  }
  
  componentDidMount(){
      //this.mapRef.fitToSuppliedMarkers(markerIDs,true);
      const favPlaceLatitude = parseFloat(this.props.navigation.state.params.latitude)
      const favPlaceLongitude = parseFloat(this.props.navigation.state.params.longitude)
      this.mapRef.fitToCoordinates([{latitude:favPlaceLatitude,longitude:favPlaceLongitude}], {
          edgePadding: {
            bottom: 200, right: 50, top: 150, left: 50,
          },
          animated: true,
      });
  }
  
  render(){
  
      const { navigation } = this.props;
      const favPlaceLatitude = parseFloat(navigation.state.params.latitude)
      const favPlaceLongitude = parseFloat(navigation.state.params.longitude)
  
      return(
          &lt;View style={styles.container}&gt;
              &lt;MapView provider={MapView.PROVIDER_GOOGLE} ref={ref =&gt; {this.mapRef = ref;}} style={styles.map} region={this.state.position}&gt;
                  {this.state.position.latitude &amp;&amp;
                      &lt;MapView.Marker identifier="Marker2" coordinate={{latitude:this.state.position.latitude,longitude:this.state.position.longitude}} pinColor="red"/&gt;
                  }
                  {this.state.position.longitude &amp;&amp;
                      &lt;MapView.Marker identifier="Marker1" coordinate={{latitude:favPlaceLatitude,longitude:favPlaceLongitude}} pinColor="green"/&gt;
                  }
              &lt;/MapView&gt;
          &lt;/View&gt;
      );
    }
  }
  
  const styles={
    container:{
      ...StyleSheet.absoluteFillObject,
      justifyContent: 'flex-end',
      alignItems: 'center',
    },
    map:{
      padding:100,
      ...StyleSheet.absoluteFillObject
    }
  }
  </code></pre>
  
  <p>can you someone suggest what is wrong? attaching simulator image for reference.
  <a href="https://i.stack.imgur.com/rK8te.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rK8te.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/uVwJh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uVwJh.png" alt="enter image description here"></a></p>