Navigation events
NavigationView callbacks
Handlers receive a React Native event object. Use event.nativeEvent for payload fields.
| Callback | Payload (nativeEvent) |
|---|---|
onNavigationReady
| { isRunning }
|
onRouteProgressChange
| { distanceRemaining, durationRemaining, fractionTraveled, currentLegIndex, currentStepIndex }
|
onArrival
| { type, legIndex, stepIndex, distanceRemaining }
|
onReroute
| { proactive, latitude?, longitude? }
|
onOffRoute
| { latitude, longitude }
|
onFasterRouteAvailable
| { automaticAccept }
|
onBannerInstruction
| { primaryText, secondaryText?, distanceAlongGeometry }
|
onVoiceInstruction
| { text, ssmlText?, distanceAlongGeometry }
|
onCancelNavigation
| — |
onNavigationFinished
| — |
onNavigationRunning
| — |
onSessionStateChange
| { state } where state is "idle", "ready", "running", "paused", "finished", or "cancelled"
|
Example
<NavigationView
onRouteProgressChange={(event) => {
const { distanceRemaining } = event.nativeEvent;
console.log(`Remaining: ${Math.round(distanceRemaining)} m`);
}}
onBannerInstruction={(event) => {
console.log(event.nativeEvent.primaryText);
}}
onSessionStateChange={(event) => {
console.log(event.nativeEvent.state);
}}
/>
NavigationSession events
Subscribe with navigationSessionEvents.addListener(name, handler, sessionId). Common event names:
| Event | Typical payload |
|---|---|
routeProgressChange
| Distance, duration, leg/step indices |
bannerInstruction
| Maneuver banner text and distance along geometry |
voiceInstruction
| Spoken instruction text |
navigationRunning
| Guidance active |
Use the same session id returned from NavigationSession.create() when registering listeners. Remove subscriptions and call session.destroy() when your screen unmounts. See Headless navigation.