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
- Introduction
- Setting up react-native-maps-directions
- Retrieving the Travel Time
- Complete Sample Code
- Conclusion
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>
);
};
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}
/>
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;
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! 🚀
