All-in-One UI
AllInOneView embeds the native All-in-One experience: place search, trip planning, preview, and turn-by-turn navigation in one component. Use it when you want a full workflow without building separate search and preview screens.
Prerequisites: Getting started (install, license, permissions).
Example
import { useState } from "react";
import { AllInOneView } from "@trimblemaps/navigation-react-native";
export function AllInOneScreen() {
const [status, setStatus] = useState("Search or add stops to plan a route");
return (
<>
<AllInOneView
style={{ flex: 1 }}
shouldSimulateRoute
enableVanishingRouteLine
tripPreviewEnabled
onNavigationRunning={() => setStatus("Navigation running")}
onNavigationFinished={() => setStatus("Navigation finished")}
onCancelNavigation={() => setStatus("Navigation cancelled")}
/>
</>
);
}
Props and callbacks
| Prop / callback | Description |
|---|---|
tripPreviewEnabled
| Allow trip preview before guidance |
shouldSimulateRoute
| Simulate route progress (testing) |
enableVanishingRouteLine
| Vanishing route line during guidance |
onNavigationRunning
| Guidance started |
onNavigationFinished
| Session completed |
onCancelNavigation
| User cancelled navigation |
For custom layouts (your own search UI or preview only), use TripPreviewView and NavigationView separately. See Trip preview and Turn-by-turn navigation.