react-native-maps fitToSuppliedMarker/fitToCorodinates does not show all markers

i am trying to use simple MapView and display 2 markers.

they both appear correctly on map view but not visible on screen at same time (Image1 rendered by default)

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)

i tried using fitToSuppliedMarkers/fitToCocordinates but nothing seems to work.

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) => {
          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) => 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(
        <View style={styles.container}>
            <MapView provider={MapView.PROVIDER_GOOGLE} ref={ref => {this.mapRef = ref;}} style={styles.map} region={this.state.position}>
                {this.state.position.latitude &&
                    <MapView.Marker identifier="Marker2" coordinate={{latitude:this.state.position.latitude,longitude:this.state.position.longitude}} pinColor="red"/>
                }
                {this.state.position.longitude &&
                    <MapView.Marker identifier="Marker1" coordinate={{latitude:favPlaceLatitude,longitude:favPlaceLongitude}} pinColor="green"/>
                }
            </MapView>
        </View>
    );
  }
}

const styles={
  container:{
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map:{
    padding:100,
    ...StyleSheet.absoluteFillObject
  }
}

can you someone suggest what is wrong? attaching simulator image for reference.