Trip preview
TripPreviewView shows route options and trip details before the user starts turn-by-turn guidance. Use it for multi-stop or commercial-vehicle flows where you want confirmation before NavigationView takes over.
Account must be initialized with Maps and Navigation licenses. See Getting started.
Basic flow
- Build a
TripwithcreateTrip(see Turn-by-turn navigation). - Render
TripPreviewViewwith that trip. - On
onStartNavigation, swap toNavigationViewand callstartNavigationwith the same trip.
import { useRef, useState } from "react";
import {
NavigationView,
TripPreviewView,
type NavigationViewRef,
type Trip,
} from "@trimblemaps/navigation-react-native";
function TripPreviewScreen({ trip }: { trip: Trip }) {
const navigationRef = useRef<NavigationViewRef>(null);
const [showNavigation, setShowNavigation] = useState(false);
if (showNavigation) {
return (
<NavigationView
ref={navigationRef}
style={{ flex: 1 }}
shouldSimulateRoute
enableVanishingRouteLine
onNavigationReady={() => {
navigationRef.current?.startNavigation(trip, {
shouldSimulateRoute: true,
});
}}
/>
);
}
return (
<TripPreviewView
style={{ flex: 1 }}
trip={trip}
shouldSimulateRoute
enableVanishingRouteLine
onRouteReady={(event) => {
console.log(`Routes: ${event.nativeEvent.routeCount}`);
}}
onStartNavigation={() => setShowNavigation(true)}
onRouteError={(event) => console.error(event.nativeEvent.message)}
/>
);
}
Callbacks
| Callback | When it fires |
|---|---|
onRouteReady
| Route calculation finished (routeCount in nativeEvent)
|
onStartNavigation
| User chose to start guidance from preview |
onRouteError
| Routing failed (message in nativeEvent)
|
TripPreviewView accepts the same simulation and route-line props as NavigationView (shouldSimulateRoute, enableVanishingRouteLine).
All-in-One alternative
For search, preview, and navigation in a single native-hosted flow, use All-in-One UI instead of composing TripPreviewView yourself.