Calculate distance between two lat+lng coordinates in React Native?

Question

I've got an object containing the lat and lng of my companys facilities. I've also got an object containing the lat and lng of the user's current location. What I'd like to do is iterate through the object with the location data of the sites, and calculate the closest one to the user's location. I'd like to get the kilometers between the two as well as the time it would take to drive the distance.

I've been looking at Google's Geometry API but can not figure out how to use this in React Native, if it's possible.

My question is what I should do to best achieve this? Can I somehow use the Google Geometry API?

Edit: I don't have to do this in the app, preferably I'd like to do so, but if it's not possible I could simply make a fetch to my PHP API if there is a better solution for PHP.

Answer 1

The npm package geolib https://github.com/manuelbieh/geolib has several methods that can help you do this; getDistance, findNearest, and orderByDistance.

Answer 2

Try out this updated working code!

import {getDistance} from 'geolib';
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";

export default class Locations extends Component
{
    state = {  
        destinationLat: 31.6200,
        destinationLong: 74.8765,
        distance:null,
        startLat:52.528308,
        startLong:1.3817765
    };
    async componentDidMount(){
        let location = await Location.getCurrentPositionAsync({
            enableHighAccuracy: true,
        });
        this.setState({
            startLat: location.coords.latitude,
            startLong: location.coords.longitude,
          });
        var dis = getDistance(
            {latitude: location.coords.latitude, longitude: location.coords.longitude},
            {latitude: this.state.destinationLat, longitude: this.state.destinationLong},
          );
          this.setState({
            distance: dis/1000,
          });
    };
    render(){
        return(
            <Text>{this.state.distance} KMs</Text>
        );
    }
}