Overview
This page documents all TypeScript types exported by the react-native-maps-routes library. These types are used for type-safe route configuration, callbacks, and API interactions.
Travel Mode
TravelMode
Defines the mode of transportation for route calculation.
type TravelMode = "DRIVE" | "BICYCLE" | "TWO_WHEELER" | "WALK";
"DRIVE" - Driving by car"BICYCLE" - Bicycle routing"TWO_WHEELER" - Motorcycle or scooter"WALK" - Walking/pedestrian routing
Usage:
import { MapViewRoute } from 'react-native-maps-routes';
import type { TravelMode } from 'react-native-maps-routes';
const mode: TravelMode = "DRIVE";
<MapViewRoute
origin={origin}
destination={destination}
apiKey={apiKey}
mode={mode}
/>
Route Modifiers
RouteModifiers
Options to modify how routes are calculated by avoiding certain road types or conditions.
type RouteModifiers = {
avoidTolls?: boolean;
avoidHighways?: boolean;
avoidFerries?: boolean;
avoidIndoor?: boolean;
};
Prefer routes that avoid toll roads. Applies to DRIVE and TWO_WHEELER modes only.
Prefer routes that avoid highways. Applies to DRIVE and TWO_WHEELER modes only.
Prefer routes that avoid ferries. Applies to DRIVE and TWO_WHEELER modes only.
Prefer routes that avoid indoor steps. Applies to WALK mode only.
<MapViewRoute
origin={origin}
destination={destination}
apiKey={apiKey}
mode="DRIVE"
routeModifiers={{
avoidTolls: true,
avoidHighways: false,
avoidFerries: true,
}}
/>
Request Body
ComputeRoutesRequestBody
Minimal type definition for the Google Routes API computeRoutes request body. Use requestBodyOverrides prop to pass any additional fields supported by the API.
type ComputeRoutesRequestBody = {
origin?: { location: { latLng: { latitude: number; longitude: number } } };
destination?: {
location: { latLng: { latitude: number; longitude: number } };
};
intermediates?: Array<{
location: { latLng: { latitude: number; longitude: number } };
}>;
travelMode?: string;
routeModifiers?: RouteModifiers;
[key: string]: unknown;
};
routingPreference, languageCode, polylineQuality, etc.
Reference: Google Routes API computeRoutes
Usage:
<MapViewRoute
origin={origin}
destination={destination}
apiKey={apiKey}
requestBodyOverrides={{
routingPreference: "TRAFFIC_AWARE",
languageCode: "en-US",
polylineQuality: "HIGH_QUALITY",
}}
/>
Leg Fields
LegField
Fields that can be requested for each route leg. A leg represents a segment of the route between waypoints.
type LegField =
| "distanceMeters"
| "duration"
| "staticDuration"
| "startLocation"
| "endLocation";
"distanceMeters" - Distance of the leg in meters"duration" - Estimated travel time considering traffic"staticDuration" - Travel time without traffic considerations"startLocation" - Starting coordinates of the leg"endLocation" - Ending coordinates of the leg
Usage:
import type { LegField, GoogleRouteLeg } from 'react-native-maps-routes';
const legFields: LegField[] = [
"distanceMeters",
"duration",
"startLocation",
"endLocation"
];
<MapViewRoute
origin={origin}
destination={destination}
apiKey={apiKey}
legFields={legFields}
onLegs={(legs: GoogleRouteLeg[]) => {
legs.forEach(leg => {
console.log('Leg distance:', leg.distanceMeters);
console.log('Leg duration:', leg.duration);
});
}}
/>
LegStepField
Fields that can be requested for each step within a route leg. Steps provide turn-by-turn navigation instructions.
type LegStepField =
| "distanceMeters"
| "staticDuration"
| "polyline"
| "startLocation"
| "endLocation"
| "navigationInstruction";
"distanceMeters" - Distance of the step in meters"staticDuration" - Duration of the step"polyline" - Encoded polyline for the step"startLocation" - Starting coordinates of the step"endLocation" - Ending coordinates of the step"navigationInstruction" - Turn-by-turn navigation instructions
Usage:
import type { LegStepField, GoogleRouteLeg } from 'react-native-maps-routes';
const legStepFields: LegStepField[] = [
"distanceMeters",
"navigationInstruction",
"startLocation",
"endLocation"
];
<MapViewRoute
origin={origin}
destination={destination}
apiKey={apiKey}
legFields={["distanceMeters"]}
legStepFields={legStepFields}
onLegs={(legs) => {
legs.forEach(leg => {
leg.steps?.forEach(step => {
console.log('Step instruction:', step.navigationInstruction?.instructions);
});
});
}}
/>
Response Types
GooglePolylineRoute
The complete route response from Google Routes API.
type GooglePolylineRoute = {
polyline: {
encodedPolyline: string;
};
duration?: string;
distanceMeters?: number;
legs?: GoogleRouteLeg[];
};
Container for the encoded polyline string.Google-encoded polyline representing the route path.
Estimated travel duration as a string (e.g., “3600s” for 1 hour).
Total distance of the route in meters.
Array of route legs (segments between waypoints). Only present when legFields or legStepFields are specified.
GoogleRouteLeg
Represents a segment of the route between two waypoints.
type GoogleRouteLeg = {
distanceMeters?: number;
duration?: string;
staticDuration?: string;
startLocation?: {
latLng: {
latitude: number;
longitude: number;
};
};
endLocation?: {
latLng: {
latitude: number;
longitude: number;
};
};
steps?: GoogleRouteStep[];
};
Distance of this leg in meters.
Estimated travel time for this leg considering traffic conditions (e.g., “1800s”).
Travel time for this leg without traffic considerations (e.g., “1500s”).
Starting coordinates of this leg. Ending coordinates of this leg. Array of navigation steps within this leg. Only present when legStepFields are specified.
GoogleRouteStep
Represents a single step in turn-by-turn navigation.
type GoogleRouteStep = {
distanceMeters?: number;
staticDuration?: string;
polyline?: {
encodedPolyline: string;
};
startLocation?: {
latLng: {
latitude: number;
longitude: number;
};
};
endLocation?: {
latLng: {
latitude: number;
longitude: number;
};
};
navigationInstruction?: {
maneuver?: string;
instructions?: string;
};
};
Distance of this navigation step in meters.
Duration of this step (e.g., “120s”).
Encoded polyline for this specific step.Google-encoded polyline string.
Starting coordinates of this step. Ending coordinates of this step. Turn-by-turn navigation instructions for this step.Type of maneuver (e.g., “TURN_LEFT”, “TURN_RIGHT”, “STRAIGHT”).
Human-readable navigation instruction (e.g., “Turn left onto Main St”).
Complete Example
import React from 'react';
import MapView from 'react-native-maps';
import { MapViewRoute } from 'react-native-maps-routes';
import type {
TravelMode,
RouteModifiers,
LegField,
LegStepField,
GoogleRouteLeg,
} from 'react-native-maps-routes';
export default function NavigationScreen() {
const mode: TravelMode = "DRIVE";
const modifiers: RouteModifiers = {
avoidTolls: true,
avoidHighways: false,
};
const legFields: LegField[] = [
"distanceMeters",
"duration",
"startLocation",
"endLocation",
];
const legStepFields: LegStepField[] = [
"navigationInstruction",
"distanceMeters",
"startLocation",
"endLocation",
];
const handleLegs = (legs: GoogleRouteLeg[]) => {
legs.forEach((leg, index) => {
console.log(`Leg ${index + 1}:`, {
distance: leg.distanceMeters,
duration: leg.duration,
});
leg.steps?.forEach((step, stepIndex) => {
console.log(` Step ${stepIndex + 1}:`,
step.navigationInstruction?.instructions
);
});
});
};
return (
<MapView style={{ flex: 1 }}>
<MapViewRoute
origin={{ latitude: 37.7749, longitude: -122.4194 }}
destination={{ latitude: 34.0522, longitude: -118.2437 }}
apiKey="YOUR_API_KEY"
mode={mode}
routeModifiers={modifiers}
legFields={legFields}
legStepFields={legStepFields}
onLegs={handleLegs}
/>
</MapView>
);
}
See Also