How to Retrieve Travel Time with React Native Maps Directions
Tags: reactnative, maps, tutorial, javascript
Published: 2023-08-30 00:15:59

---
title: "How to Retrieve Travel Time with React Native Maps Directions"
published: true
description: "Learn how to easily get the estimated travel time between two points using react-native-maps-directions."
tags: reactnative, maps, tutorial, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e90jxz8yagmxxl3pi3o3.png
---

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](#introduction)
2. [Setting up react-native-maps-directions](#setting-up)
3. [Retrieving the Travel Time](#retrieving-time)
4. [Complete Sample Code](#sample-code)
5. [Conclusion](#conclusion)

## <a name="introduction"></a>Introduction

First, let's install the necessary packages:

```bash
npm install react-native-maps react-native-maps-directions
```

Also, you'll need a Google Maps Directions API key. You can get one [here](https://console.cloud.google.com/).

## <a name="setting-up"></a>Setting up react-native-maps-directions

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

```jsx
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>
  );
};
```

## <a name="retrieving-time"></a>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.

```jsx
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}
/>
```

## <a name="sample-code"></a>Complete Sample Code

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

```jsx
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;
```

## <a name="conclusion"></a>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! 🚀