How to set boundaries for react native MapView?

Question

I have integrated react native map with my latest react native application.In the map i want to set boundaries to the map. The official document suggests the method setMapBoundaries but it requires the argument like this northEast: LatLng, southWest: LatLng .

How can i get the values for these arguments.my mapView is like this.

<MapView
            showsUserLocation
            provider={MapView.PROVIDER_GOOGLE}
            style={styles.map}
            region={region}
            onRegionChangeComplete={this.onRegionChangeComplete}
            setMapBoundaries={}
            onUserLocationChange={this.onUserLocationChange}

        >

score 6 · Accepted Answer · answered Jul 20 '18 at 05:37

What you are trying to use is not a property or event, it's a method. So you can't use it there. Check the documentation again.

setMapBoundaries(northEast: LatLng, southWest: LatLng): void;

export interface LatLng {
   latitude: number;
   longitude: number;
}

Try to get the ref of the MapView,

<MapView
    ref={(ref)=> this.mapRef = ref}
/>

and call the method setMapBoundaries

this.mapRef.setMapBoundaries({latitude: 1, longitude: 1},{latitude: 1, longitude: 1})

score 0 · Answer 2 · answered Jun 02 '23 at 10:15

Pass the setMapBoundaries in onRegionChange

const onRegionChange = async (region) => {
    const bound = await mapRef.current.getMapBoundaries().then((response) => {
        return response;
     })    -> you can pass this value
        await mapRef.current.setMapBoundaries({latitude: your custom value,longitude: your custom value},{latitude: your custom value,longitude: your custom value}); -> you can pass your custom north-east and south-west coordinate too  
  
  };

<MapView
        ref={mapRef}
        onRegionChange={onRegionChange}

How to set boundaries for react native MapView?

2 Answers2

Pass the setMapBoundaries in onRegionChange