How to auto zoom into your current location using React Native Maps

How to auto zoom into your current location using React Native Maps

React native maps ( ) is the go to React Native component for setting up map in your React native application.

In this article, I will show you how to get current user location and zoom into your current location when the map is loaded.

Install the component from the documentation stated in

npm install react-native-maps --save</span>

Followed by :

react-native link react-native-maps</span>

Remember to re run your Android or Ios application after linking. Import the MapView component :

import MapView, { AnimatedRegion } from “react-native-maps”;</span>

Initialize the following in your state :

mapRegion will store the region of the map after the map is loaded; lastLat and lastLng will be used to store the latest lat and lng values ; initialRegion will be used to store the initial region loaded fetched from the current user location. A region of a map is defined as follows :

region: {
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421

Latitude delta is used to control the amount of map you want to display.In short the amount of zoom. As defined in the : The amount of north-to-south distance (measured in degrees) to display on the map.

Create a function to fetch the current location :

Create a function to fetch the current location :

async getCurrentLocation() {
        position => {</span> <span id="7a26" class="de im in bo io b fp is it iu iv iw iq r ir">let region = {
                latitude: parseFloat(position.coords.latitude),
                longitude: parseFloat(position.coords.longitude),
                latitudeDelta: 5,
                longitudeDelta: 5
            await this.setState({
                initialRegion: region
        error => console.log(error),
            enableHighAccuracy: true,
            timeout: 20000,
            maximumAge: 1000

Call the above function in componentDidMount()


Define the Map in the render function :

            ref={ref => (this.mapView = ref)}

Define the function goToIntialRegion(). The latitude and longitude delta values are lowered to cover a smaller area of the map . animateToRegion() is a function that will animate to region passed as a parameter ( ) . This will be called when the map is ready :

goToInitialLocation() {
    let initialRegion = Object.assign({}, this.state.initialRegion);
    initialRegion["latitudeDelta"] = 0.005;
    initialRegion["longitudeDelta"] = 0.005;
    this.mapView.animateToRegion(initialRegion, 2000);

When you re load your component , you will see that the map zooms into your current location. You can use the lastLat and lastLng values to set a custom marker on the map .