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.
