Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

react-native-maps initialRegion, region and animateToRegion not working for iOS but working for Android

$
0
0

I have a React Native project using react-native-maps:

    getRegionForCoordinates(points) {        // points should be an array of { latitude: X, longitude: Y }        let minX, maxX, minY, maxY;        var arr = [];        Object.keys(points).map(key => {            var point = points[key];            arr.push([{latitude: point.latitude, longitude: point.longitude}])        })        points = arr;        var first = points[0];        minX = first[0].latitude;        maxX = first[0].latitude;        minY = first[0].longitude;        maxY = first[0].longitude;        // calculate rect        points.map((point) => {            minX = Math.min(minX, point[0].latitude);            maxX = Math.max(maxX, point[0].latitude);            minY = Math.min(minY, point[0].longitude);            maxY = Math.max(maxY, point[0].longitude);        });        const midX   = (minX + maxX) / 2;        const midY   = (minY + maxY) / 2;        const deltaX = (maxX - minX);        const deltaY = (maxY - minY);        return {            latitude       : midX,            longitude      : midY,            latitudeDelta  : deltaX,            longitudeDelta : deltaY        };    }   componentDidMount() {      var event     = this.props.event;      var mapData   = JSON.parse(event.map);      var map       = mapData[0];      var markers = [];      Object.keys(map.markers).map(key => {         var marker = map.markers[key];         var obj = [{ latitude: parseFloat(marker.lat), longitude: parseFloat(marker.lng) }];         markers.push(obj[0]);      });      var region = this.getRegionForCoordinates(markers);      setTimeout(() => {         this.ref.animateToRegion(region, 1);      }, 5000)   }    renderMap() {      var event     = this.props.event;      var mapData   = JSON.parse(event.map);      var map       = mapData[0];        return (<View><MapView                    provider={PROVIDER_GOOGLE}                    style={mapStyles.map}               ref={(map) => {                  this.ref = map               }}                    customMapStyle={customMapStyle}                      key={ `${Date.now()}` }>                    {                        map.markers.map(marker => {                            return (<EventMapMarker marker={marker} navigation={this.props.navigation} />                            )                        })                    }</MapView></View>        )    }

In this code I am trying to animate to a region based on the markers that will be displayed on the map. The latitude, longitude, latitudeDelta and longitudeDelta are correct as they work for Android.

However, on iOS it animates to a completely wrong region, both in the simulator and on the device.

Setting initialRegion or region doesn't seem to make any difference.

I have tried a bunch of different things, like animating in the onMapReady function, using a setTimeout to delay the animate, updating/downgrading react-native-maps, etc.. I don't know if this is a bug or something I have set incorrectly in my project.

React Native version is 0.59.0.

react-native-maps version is 0.27.1.


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>