title: How to track current user properly by using react-native-map
body: <p>I'm getting current user latitude and longitude and showing them on the map. But when I start tracking the user it shows error sometimes as displayed in image.</p>
  
  <p>But on emulator is working totally fine. This behavior is happening only on Real device.</p>
  
  <p><a href="https://i.stack.imgur.com/SizRM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SizRM.jpg" alt="enter image description here"></a></p>
  
  <p>but some times it works properly as displayed in the image </p>
  
  <p><a href="https://i.stack.imgur.com/MdDYI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MdDYI.jpg" alt="enter image description here"></a>. </p>
  
  <p>I am unable to figure out, why this is happening. My code is below</p>
  
  <pre><code>import React, { Component } from "react";
  import {
    StyleSheet,
    PermissionsAndroid,
    View,
    Text,
    Image
  } from "react-native";
  import { AskPermission } from "../../components/AskPermissions";
  import MapView, { PROVIDER_GOOGLE, Marker, Polyline } from "react-native-maps";
  import haversine from "haversine";
  
  class TrackCurrentUser extends Component {
    state = {
      region: {
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0.0922, // must give some valid value
        longitudeDelta: 0.0421 // must give some valid value
      },
      error: "",
      routeCoordinates: [],
      distanceTravelled: 0, // contain live distance
      prevLatLng: {} // contain pass lat and lang value
    };
  
    //   getLocation Permission and call getCurrentLocation method
    componentDidMount() {
      const permission = PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION;
      AskPermission(permission);
      this.getCurrentLocation();
    }
  
    //   getting the current Location of a user...
    getCurrentLocation = () =&gt; {
      navigator.geolocation.watchPosition(
        position =&gt; {
          const { latitude, longitude } = position.coords;
          const { routeCoordinates } = this.state;
          const newCoordinate = { latitude, longitude };
  
          let region = {
            latitude: parseFloat(position.coords.latitude),
            longitude: parseFloat(position.coords.longitude),
            latitudeDelta: 5,
            longitudeDelta: 5
          };
  
          this.setState({
            initialRegion: region,
            region: region,
            routeCoordinates: routeCoordinates.concat([newCoordinate]),
            distanceTravelled:
              this.state.distanceTravelled + this.calcDistance(newCoordinate),
            prevLatLng: newCoordinate
          });
        },
        error =&gt; console.log(error),
        {
          enableHighAccuracy: true,
          timeout: 20000,
          maximumAge: 1000,
          distanceFilter: 1
        }
      );
    };
  
    //   animate to current user Location
    goToInitialLocation = () =&gt; {
      let initialRegion = Object.assign({}, this.state.initialRegion);
      initialRegion["latitudeDelta"] = 0.005;
      initialRegion["longitudeDelta"] = 0.005;
      this.mapView.animateToRegion(initialRegion, 2000);
    };
  
    //   lat &amp; lng for Marker
    getMapRegion = () =&gt; ({
      latitude: this.state.region.latitude,
      longitude: this.state.region.longitude
    });
  
    //   calculate the total distance
    calcDistance = newLatLng =&gt; {
      // console.warn("Method Called");
      const { prevLatLng } = this.state;
      return haversine(prevLatLng, newLatLng) || 0;
    };
  
    render() {
      return (
        &lt;View style={{ flex: 1 }}&gt;
          &lt;MapView
            style={{ flex: 0.9 }}
            provider={PROVIDER_GOOGLE}
            region={this.state.mapRegion}
            followUserLocation={true}
            ref={ref =&gt; (this.mapView = ref)}
            zoomEnabled={true}
            showsUserLocation={true}
            onMapReady={this.goToInitialLocation}
            initialRegion={this.state.initialRegion}
          &gt;
            &lt;Polyline coordinates={this.state.routeCoordinates} strokeWidth={5} /&gt;
            &lt;Marker coordinate={this.getMapRegion()} title={"Current Location"}&gt;
              &lt;Image
                source={require("../../images/car.png")}
                style={{ height: 35, width: 35 }}
              /&gt;
            &lt;/Marker&gt;
          &lt;/MapView&gt;
          &lt;View style={styles.distanceContainer}&gt;
            &lt;Text&gt;{parseFloat(this.state.distanceTravelled).toFixed(2)} km&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  export default TrackCurrentUser;
  
  const styles = StyleSheet.create({
    distanceContainer: {
      flex: 0.1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "transparent"
    }
  });
  </code></pre>
  
  <p>waiting for your solution to solve this problem.</p>