calculating the miles from users current location

In My JSON file, I have the latitude and Longitude of the destination. Is thier any way, I can calculate the distance in miles from the users current position.
I have the following code so far. I can see the map with the following code, but I cannot see the miles from the users current location and map from the users current location. I don’t know user current location Longitude and Latitude. All I know is destination Longitude and latitude. Below code just shows the place where the Longitude and Latitude of the location is.

 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView, TouchableOpacity, Linking, Button } from 'react-native';
import { connect } from 'react-redux';
import { getTheme } from 'react-native-material-kit';
import EvilIcon from 'react-native-vector-icons/EvilIcons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
import * as actions from '../actions';
import getDirections from 'react-native-google-maps-directions'
const theme = getTheme();

const styles = StyleSheet.create({
  card: {
    marginTop: 10,
    paddingBottom: 20,
    marginBottom: 20,
    borderColor: 'lightgrey',
    borderWidth: 0.5,
  },

  container: {     
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#4F6D7A', 
    height: 500,
    alignSelf:'center',
    width:500,
    position: 'relative',
    marginTop: 5,
    top: 10
  }, 

  title1: {
      top: 10,
      left: 80,
      fontSize: 24,
  },
  title2: {
      top: 35,
      left: 82,
      fontSize: 18,
  },
  image: {
      flex: 0,
      height: 100,
      width: 333,
      backgroundColor: 'transparent',
      justifyContent: 'center',
      alignItems: 'center',
  },
  closeIcon: {
      position: 'absolute',
      top: 5,
      left: 295,
      color: 'black'

  },  
  icon: {
      position: 'absolute',
      top: 15,
      left: 0

  },
  textArea: {
      flexDirection: 'row',
      paddingLeft: 20,
      paddingTop: 10,
      width: 260,
  },
  textIcons: {
      color: '#26a69a',
  },
  actionArea: {
      paddingTop: 10,
      flexDirection: 'row',
      justifyContent: 'space-around',
      alignItems: 'center',
  },

  title:{
    justifyContent: 'center',
    paddingTop: 10,
    alignItems: 'center',
    alignSelf: 'center',
    fontWeight: 'bold',
    fontSize: 22,
    color: 'black'
    },

    SerContent:{
        fontWeight: 'bold',
        fontSize: 16,
        paddingTop: 10,
        alignSelf: 'center',
        color: 'black'
    },

    underLineText: {
        fontSize: 17,
        textDecorationLine: 'underline',
        color: 'black',
        fontWeight: 'bold',
        textAlign: 'center',

      },

      dir:{
        flexDirection:'row',
        paddingTop: 30,
        textAlign: 'center',
        fontSize: 17,
        alignSelf: 'center'

    } ,   

    Address1:{
        alignSelf: 'center',
        marginRight: 20,
        fontSize: 17,
        fontWeight: 'bold',
        color: 'black'
    },
    toolbar:{
        flexDirection:'row' ,   //Step 1

    },
    toolbarTitle:{
        width: 10,
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        flex:1                //Step 3
      },
      buttonShape:{

        margin: 40,
        width:160,
        marginLeft: 80,
        backgroundColor:'#00BCD4',


    },

});
class ServiceDetail extends Component {




  render() {




var destUrl = 'https://www.google.com/maps/search/?api=1&query=' + this.props.services.destAddr1 + '+' + 'field'

return (



     <View>

         <View>

             <Text  style={styles.title}>{this.props.services.ser}</Text>
            <Text style={styles.SerContent} >Service is available in the following locations:</Text>
        </View>

         <View style={styles.dir}>
                <Text style={styles.Address1}> {this.props.services.Location}:</Text>   
                <TouchableOpacity  onPress={() => Linking.openURL(destUrl)}>
                    <Text style={styles.underLineText}>Directions</Text>
                </TouchableOpacity>
        </View>


   </View>



  );
}
}



const mapStateToProps = state => {
    return { 
        services: state.serviceSelected
     };
  };



export default connect(mapStateToProps, actions)(ServiceDetail);

Below is my JSON file

[
{
    "id":1,
    "ser": "Service1",
    "Location": "TestLoc1",
    "Phone":"(999)-921-9292",
    "SecondLoc": "TestLoc",
    "email":"[email protected]",
    "sourceLat":"33.977806",
    "sourceLong":"-117.3732541",
    "destLatL1":"33.613355",
    "destLongL1":"-114.596569",
    "destLatL2":"33.761693",
    "destLongL2":"-116.971169",
    "destAddr1": "Test Drive, 99999",
    "destAddr2": "Test City, Test Drive, 92345"
  },

  {
    "id":1,
    "ser": "Service2",
    "Location": "TestLoc1",
    "Phone":"(999)-921-9292",
    "SecondLoc": "TestLoc",
    "email":"[email protected]",
    "sourceLat":"33.977806",
    "sourceLong":"-117.373261",
    "destLatL1":"33.613355",
    "destLongL1":"-114.596569",
    "destLatL2":"33.761693",
    "destLongL2":"-116.971169",
    "destAddr1": "Test Drive, 99999",
    "destAddr2": "Test City, Test Drive, 92345"
  },
  ]

any help will be greatly appreciated.