calculating the miles from users current location - reactjs

Question

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":"test1#test.com",
"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":"test2#test.com",
"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.

Answer 1

If you do not know the user's current location, it is impossible to calculate the distance to a given destination location. You write that Google Maps knows your current location without actually putting your location in it. That's because Google Maps checks the GPS of your phone.
You can do that as well! React Native comes with a Geolocation API which helps you retrieve the current location of the user. For Android, you will need to update your AndroidManifest.xml to obtain the user's permission for accessing GPS data. For iOS, it is enabled by default but if you want to obtain access while the app runs in the background; you need to update the Info.plist.
For more information on obtaining permissions and using the Geolocation API, check out the React Native docs.

Answer 2

I googled and found out that this is the way to get current location. I just need to set the starting address to Current+Location. I don't need Longitude and Latitude, and that's what I wanted.
https://maps.google.com?saddr=Current+Location&daddr=43.12345,-76.12345