NavigationView

Not released yet

<NavigationView> is on the main branch of rnmapbox/navigation and isn't part of 0.1.0-alpha.0. It ships with the next release.

<NavigationView> is a full-screen turn-by-turn navigation UI: NavigationViewController from MapboxNavigationUIKit on iOS, and an equivalent built from the Navigation SDK UI components on Android (maneuver banner with lanes and shields, speed limit, trip progress, mute, overview, recenter and end buttons).

On iOS, add audio to UIBackgroundModes in Info.plist, see Install.

import { NavigationView } from '@rnmapbox/navigation';

<NavigationView
  style={{ flex: 1 }}
  waypoints={[
    [-122.39726, 37.79205],
    { coordinate: [-122.39351, 37.79554], name: 'Ferry Building' },
  ]}
  simulate
  mute={muted}
  onRouteProgress={(event) => console.log(event.distanceRemaining)}
  onArrive={({ waypointIndex, isFinalDestination }) => {}}
  onCancel={() => close()}
  onError={({ code, message }) => {}}
/>

Props

Prop	Type	Description
`route`	`Route`	A route from `requestRoutes`. Keep it unreleased while it's passed to the view.
`waypoints`	`Waypoint[]`	Used without `route`: the view requests a route through them, origin first, and releases it on unmount.
`simulate`	`boolean`	Drives the route with simulated locations. Read when guidance starts. Defaults to `false`.
`mute`	`boolean`	Mutes voice instructions. The view's own mute button also toggles them. Defaults to `false`.
`style`	`StyleProp<ViewStyle>`
`testID`	`string`
`onRouteProgress`	`(event: RouteProgressEvent) => void`	Same event as `addRouteProgressListener`.
`onArrive`	`(event: ArriveEvent) => void`	`{ waypointIndex, isFinalDestination }`; `waypointIndex` counts the origin as 0.
`onCancel`	`() => void`	The user ended the trip. Guidance has stopped; unmount the view.
`onError`	`(error: NavigationViewError) => void`	`{ code, message }`, e.g. `route_request_failed`, `route_released`, `start_failed`.

Session

<NavigationView> uses the app's single navigation session:

Mounting it, or giving it a new route, starts guidance along that route and replaces any other active guidance. Navigation maps show its route and puck too.
Unmounting it, or the user ending the trip, stops guidance.
addRouteProgressListener and addCameraStateListener also report its guidance.
Show one NavigationView at a time. On iOS it's embedded as a child of the nearest view controller.

Android <NavigationView> has no end-of-route, feedback or alternative-route UI, no day/night styles, no road name label, and doesn't show reroutes as such.

Props​

Session​

Props

Session