title: How to calculate the distance between differents lat long and display on map dynamically react native
body: <p>I have implemented map in my application. Below is a dummy array geoCord[] I am getting api respons in one array and I am mapping this and diaplaying lar long on maps . No I am trying to calculate the distance between two lat longs, like in array there are 2 values which is displaying on map , so there shoul be one line draw and show the distance between . I have tried something but its not working . Pelase help</p>
  <p>// Dynaimc array will come from server , this kind off value will come from api</p>
  <pre><code>geoCord:[
  0:
  center: {latitude: 12.9949, longitude: 77.65311}
  coordinate: {latitude: 12.9949, longitude: 77.65311}
  description: &quot;Metro&quot;
  fillColor: &quot;rgba(230,238,255,0.5)&quot;
  key: &quot;90.64801&quot;
  radius: 550
  strokeColor: &quot;grey&quot;
  strokeWidth: 2
  title: &quot;Baiyyappanahalli&quot;
  
  1:
  center: {latitude: 13.0164, longitude: 77.65855}
  coordinate: {latitude: 13.0164, longitude: 77.65855}
  description: &quot;Abhigyan&quot;
  fillColor: &quot;rgba(230,238,255,0.5)&quot;
  key: &quot;90.67495000000001&quot;
  radius: 550
  strokeColor: &quot;green&quot;
  strokeWidth: 4
  title: &quot;Home&quot;
  ]
  </code></pre>
  <p>// Below is my code</p>
  <pre><code>import React, { Component } from 'react';
  import { ScrollView, View, ImageBackground, Alert, Dimensions, StyleSheet, Image, ToastAndroid, Platform, Linking, StatusBar } from 'react-native';
  import BG from '../images/background_600x1024.png';
  import _ from 'lodash';
  import HeaderComponent from './ui/header';
  import { withNavigationFocus } from 'react-navigation';
  import GeoFencing from 'react-native-geo-fencing';
  import MapView, { Marker, Overlay, Polygon, Circle } from &quot;react-native-maps&quot;;
  import Geolocation from '@react-native-community/geolocation';
  import MapViewDirections from 'react-native-maps-directions';
  
  
  const deviceHeight = Dimensions.get('window').height;
  const deviceWidth = Dimensions.get('window').width;
  
  
  class GeoFencingg extends Component {
    constructor(props) {
      super(props)
      this.state = {
        isLoading: false,
        title: 'Geo fencing',
        icon: 'settings',
        iconType: 'MaterialCommunityIcons',
        latitude: 0,
        longitute: 0,
        lat: 13.01640,
        lng: 77.65855,
        timestamp: null,
      };
      
    }
  
    componentDidMount() {
      //-------------------- Start Get current location of user---------//
  
      Geolocation.getCurrentPosition(
        position =&gt; {
          this.setState({
            latitude: position.coords.latitude,
            longitute: position.coords.longitude,
            timestamp: position.timestamp
          });
        },
  
        error =&gt; {
          console.log(error);
        },
        { enableHighAccuracy: false, timeout: 50000 }
      );
    
      polygon = [
        { lat: this.state.latitude, lng: this.state.longitute },
        { lat: this.state.lat, lng: this.state.lng },
        //{ lat: 22.7192, lng: 75.852 },
        { lat: 13.01640, lng: 77.65855 },
        { lat: this.state.latitude, lng: this.state.longitute }
        // last point has to be same as first point
      ];
     
      let point = {
        lat: 13.01640,
        lng: 77.65855
      };
  
      GeoFencing.containsLocation(point, polygon)
        .then(() =&gt; ToastAndroid.show(&quot;User is within area&quot;, ToastAndroid.SHORT))
        .catch(() =&gt;
          ToastAndroid.show(&quot;User is not within area&quot;, ToastAndroid.SHORT)
        );
    }
  
  
  
    render() {
      const { navigation,geoCord } = this.props;
      console.log(&quot;dataaa&quot;, geoCord);
  
      const origin = {latitude: 12.99490, longitude: 77.65311};
  const destination = {latitude: 13.01640, longitude: 77.65855};
  var GOOGLE_MAPS_APIKEY= 'https://developers.google.com/maps/documentation/directions/AIzaSyBzUXl0oI-RzOr_dKAJCZ3y2_EJ3asvIzo';
      const { title, icon } = this.state;
      return (
        &lt;ImageBackground source={BG} style={{ width: '100%', height: '100%' }} resizeMode=&quot;cover&quot;&gt;
          &lt;View&gt;
            &lt;HeaderComponent flag={'header_left_with_title'} navigation={navigation} subtitle={title} subTitleColor={'#67809F'} backButtonColor={'#67809F'} backgroundColor={'#F3F4F9'} /&gt;
          &lt;/View&gt;
          &lt;View style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#fff'
          }}&gt;
            &lt;MapView
              style={styles.map}
              initialRegion={{
                latitude: this.state.latitude,
                longitude: this.state.longitute,
                latitudeDelta: 0.015 * 5,
                longitudeDelta: 0.0121 * 5
              }}
              showsUserLocation={true}
              followUserLocation={true}
              zoomEnabled={true}
              showsScale={true}
            &gt;
              {/*Circle Draw and set radius */}
  
              &lt;MapView.Circle
                key={(this.state.latitude + this.state.longitute).toString()}
                center={{
                  latitude: this.state.latitude,
                  longitude: this.state.longitute
                }}
                radius={650}
                strokeWidth={2}
                strokeColor={&quot;red&quot;}
                fillColor={&quot;rgba(230,238,255,0.5)&quot;}
              // onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }
              /&gt;
  
            
              {/* Marker Add */}
              &lt;MapView.Marker
                coordinate={{
                  latitude: this.state.latitude,
                  longitude: this.state.longitute
                }}
                title={&quot;MTN&quot;}
                description={&quot;Nigeria&quot;}
  
              //image={require(&quot;./images/login-logo.png&quot;)}
              //pinColor={&quot;gray&quot;}
              /&gt;
  
  
              {geoCord.map(
                      (data, index) =&gt; {
                        return (
              &lt;MapView.Circle
                key={data.key}
                center={data.center}
                radius={data.radius}
                strokeWidth={data.strokeWidth}
                strokeColor={data.strokeColor}
                fillColor={data.fillColor}
              // onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }
              /&gt;
              )
            }
          )}
             {geoCord.map(
                      (data, index) =&gt; {
                        return (
              &lt;MapView.Marker
                coordinate={data.coordinate}
                title={data.title}
                description={data.description}
  
              //image={require(&quot;./images/login-logo.png&quot;)}
              //pinColor={&quot;gray&quot;}
              /&gt;
              )
            }
          )}
          &lt;MapViewDirections
      origin={origin}
      destination={destination}
      apikey=&quot;AIzaSyBzUXl0oI-RzOr_dKAJCZ3y2_EJ3asvIzo&quot;
      strokeWidth={50}
      strokeColor=&quot;red&quot;
    /&gt;
  
              &lt;View style={{ backgroundColor: 'red', width: 70, height: 70, marginTop: 10, paddingLeft: 10 }}&gt;&lt;/View&gt;
  
            &lt;/MapView&gt;
  
          &lt;/View&gt;
  
        &lt;/ImageBackground&gt;
  
      )
    }
  }
  export default withNavigationFocus(GeoFencingg);
  
  var styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: &quot;center&quot;,
      alignItems: &quot;center&quot;,
      backgroundColor: &quot;#F5FCFF&quot;
    },
    map: {
      position: &quot;absolute&quot;,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    }
  });
  </code></pre>