How to Retrieve Travel Time with React Native Maps Directions

Hello, dev.to community! Today, I'm going to show you how to obtain the estimated travel time between two points using react-native-maps-directions. This can be incredibly handy when creating apps related to travel or movement.

Table of Contents

1. Introduction
2. Setting up react-native-maps-directions
3. Retrieving the Travel Time
4. Complete Sample Code
5. Conclusion

Introduction

First, let's install the necessary packages:

npm install react-native-maps react-native-maps-directions

Also, you'll need a Google Maps Directions API key. You can get one here.

Setting up react-native-maps-directions

Next, let's set up the basic configuration to display the route guidance:

import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

const App = () => {
  const origin = {latitude: 37.7749, longitude: -122.4194}; // For example, San Francisco
  const destination = {latitude: 34.0522, longitude: -118.2437}; // For example, Los Angeles

  return (
    <MapView
      style={{flex: 1}}
      initialRegion={{
        latitude: 36.7783,
        longitude: -119.4179,
        latitudeDelta: 10,
        longitudeDelta: 10,
      }}>
      <MapViewDirections
        origin={origin}
        destination={destination}
        apikey="YOUR_GOOGLE_MAPS_API_KEY"
      />
    </MapView>
  );
};

Retrieving the Travel Time

react-native-maps-directions provides the onReady property, which sets a callback for when the route information is loaded. We can use this to get the route's distance and estimated travel time.

const handleDirectionsReady = (result) => {
  const distance = result.distance; // Distance (km)
  const duration = result.duration; // Travel time (hours)

  console.log(`Distance: ${distance} km, Travel time: ${duration} hours`);
};

<MapViewDirections
  ...
  onReady={handleDirectionsReady}
/>

Complete Sample Code

Here's the full sample code to display route guidance and retrieve the travel time:

import React from 'react';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

const App = () => {
  const origin = {latitude: 37.7749, longitude: -122.4194};
  const destination = {latitude: 34.0522, longitude: -118.2437};

  const handleDirectionsReady = (result) => {
    const distance = result.distance;
    const duration = result.duration;

    console.log(`Distance: ${distance} km, Travel time: ${duration} hours`);
  };

  return (
    <MapView
      style={{flex: 1}}
      initialRegion={{
        latitude: 36.7783,
        longitude: -119.4179,
        latitudeDelta: 10,
        longitudeDelta: 10,
      }}>
      <MapViewDirections
        origin={origin}
        destination={destination}
        apikey="YOUR_GOOGLE_MAPS_API_KEY"
        onReady={handleDirectionsReady}
      />
    </MapView>
  );
};

export default App;

Conclusion

In this article, we explored how to use react-native-maps-directions to retrieve the estimated travel time between two points. This method can simplify the process when building travel-related apps. Give it a try and enhance your apps!

If you found this helpful, please leave a like or comment. Stay tuned for more helpful tutorials! 🚀