@jacques_gordon/expo-mapbox-navigation 2.1.5 → 2.1.6

package/android/src/main/java/expo/modules/mapboxnavigation/ExpoMapboxNavigationModule.kt

@@ -15,7 +15,8 @@ class ExpoMapboxNavigationModule : Module() {
                 "onNavigationFinished",
                 "onNavigationCancelled",
                 "onRoutesFailed",
-                "onArrival"
+                "onArrival",
+                "onManeuverBannerPressed"
             )
 
             Prop("coordinates") { view: ExpoMapboxNavigationView, coordinates: List<Map<String, Double>> ->

package/android/src/main/java/expo/modules/mapboxnavigation/ExpoMapboxNavigationView.kt

@@ -93,6 +93,11 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private val onNavigationCancelled by EventDispatcher()
     private val onRoutesFailed by EventDispatcher()
     private val onArrival by EventDispatcher()
+    // Feature: emits the full list of turn-by-turn steps when the instruction
+    // banner is tapped, so the RN layer can render a steps list (bottom
+    // sheet/modal). Payload: { steps: [{ instruction, distanceMeters,
+    // maneuverType, maneuverModifier, laneInstructions }] }
+    private val onManeuverBannerPressed by EventDispatcher()
 
     // ── Views ─────────────────────────────────────────────────────────────────
     private val mapView: MapView = MapView(context)
@@ -135,11 +140,15 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private val dp = context.resources.displayMetrics.density
 
     // ── Viewport padding ──────────────────────────────────────────────────────
+    // ── Viewport padding — EXACT official Mapbox values from the camera guide ──
+    // Previous bottom=300dp pushed the focal point too far up, causing
+    // the puck to visibly jump/drift between location updates.
+    // Official guide value: top=180, left=40, bottom=150, right=40
     private val followingPadding by lazy {
-        EdgeInsets(180.0 * dp, 40.0 * dp, 300.0 * dp, 40.0 * dp)
+        EdgeInsets(180.0 * dp, 40.0 * dp, 150.0 * dp, 40.0 * dp)
     }
     private val overviewPadding by lazy {
-        EdgeInsets(120.0 * dp, 40.0 * dp, 120.0 * dp, 40.0 * dp)
+        EdgeInsets(140.0 * dp, 40.0 * dp, 120.0 * dp, 40.0 * dp)
     }
 
     // ── Props ─────────────────────────────────────────────────────────────────
@@ -167,43 +176,47 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     // Draw icons programmatically (matching screenshot: speaker, route, arrow)
     // ─────────────────────────────────────────────────────────────────────────
 
+    // ── Modern Google Maps / Waze style icons ──────────────────────────────────
+
     private fun drawSpeakerIcon(muted: Boolean): Bitmap {
         val size = (44 * dp).toInt()
         val bmp = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888)
         val c = Canvas(bmp)
+        val s = size.toFloat()
+        val color = if (muted) Color.parseColor("#5F6368") else Color.parseColor("#1A73E8")
         val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
-            color = Color.BLACK
+            this.color = color
             style = Paint.Style.FILL
         }
-        val s = size.toFloat()
-        // Speaker body (trapezoid)
+        // Speaker cone (rounded, modern Material style)
         val body = Path().apply {
-            moveTo(s * 0.18f, s * 0.38f)
-            lineTo(s * 0.38f, s * 0.38f)
-            lineTo(s * 0.58f, s * 0.22f)
-            lineTo(s * 0.58f, s * 0.78f)
-            lineTo(s * 0.38f, s * 0.62f)
-            lineTo(s * 0.18f, s * 0.62f)
+            moveTo(s * 0.16f, s * 0.40f)
+            lineTo(s * 0.34f, s * 0.40f)
+            lineTo(s * 0.56f, s * 0.20f)
+            quadTo(s * 0.60f, s * 0.17f, s * 0.60f, s * 0.22f)
+            lineTo(s * 0.60f, s * 0.78f)
+            quadTo(s * 0.60f, s * 0.83f, s * 0.56f, s * 0.80f)
+            lineTo(s * 0.34f, s * 0.60f)
+            lineTo(s * 0.16f, s * 0.60f)
+            quadTo(s * 0.12f, s * 0.60f, s * 0.12f, s * 0.56f)
+            lineTo(s * 0.12f, s * 0.44f)
+            quadTo(s * 0.12f, s * 0.40f, s * 0.16f, s * 0.40f)
             close()
         }
         c.drawPath(body, paint)
         if (!muted) {
-            // Sound waves arcs
             paint.style = Paint.Style.STROKE
-            paint.strokeWidth = s * 0.065f
+            paint.strokeWidth = s * 0.06f
             paint.strokeCap = Paint.Cap.ROUND
-            // Inner arc
-            c.drawArc(RectF(s*0.60f, s*0.33f, s*0.80f, s*0.67f), -60f, 120f, false, paint)
-            // Outer arc
-            c.drawArc(RectF(s*0.64f, s*0.24f, s*0.92f, s*0.76f), -55f, 110f, false, paint)
+            c.drawArc(RectF(s*0.62f, s*0.34f, s*0.80f, s*0.66f), -45f, 90f, false, paint)
+            c.drawArc(RectF(s*0.66f, s*0.22f, s*0.92f, s*0.78f), -40f, 80f, false, paint)
         } else {
-            // X mark for muted
             paint.style = Paint.Style.STROKE
-            paint.strokeWidth = s * 0.07f
+            paint.strokeWidth = s * 0.065f
             paint.strokeCap = Paint.Cap.ROUND
-            paint.color = Color.parseColor("#FF4444")
-            c.drawLine(s*0.65f, s*0.32f, s*0.88f, s*0.68f, paint)
-            c.drawLine(s*0.88f, s*0.32f, s*0.65f, s*0.68f, paint)
+            paint.color = Color.parseColor("#EA4335")
+            c.drawLine(s*0.66f, s*0.34f, s*0.88f, s*0.66f, paint)
+            c.drawLine(s*0.88f, s*0.34f, s*0.66f, s*0.66f, paint)
         }
         return bmp
     }
@@ -212,34 +225,29 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         val size = (44 * dp).toInt()
         val bmp = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888)
         val c = Canvas(bmp)
+        val s = size.toFloat()
         val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
-            color = Color.BLACK
-            style = Paint.Style.STROKE
-            strokeWidth = size * 0.08f
-            strokeCap = Paint.Cap.ROUND
-            strokeJoin = Paint.Join.ROUND
+            color = Color.parseColor("#1A73E8")
         }
-        val s = size.toFloat()
-        // Route line with S-curve (like the image: start dot → curve → end pin)
-        // Start dot
-        paint.style = Paint.Style.FILL
-        c.drawCircle(s * 0.28f, s * 0.75f, s * 0.07f, paint)
-        // Route path
+        // Map/overview icon: stacked layers (like Google Maps "map view" icon)
         paint.style = Paint.Style.STROKE
-        val routePath = Path().apply {
-            moveTo(s * 0.28f, s * 0.75f)
-            cubicTo(
-                s * 0.28f, s * 0.45f,
-                s * 0.72f, s * 0.55f,
-                s * 0.72f, s * 0.25f
-            )
+        paint.strokeWidth = s * 0.07f
+        paint.strokeJoin = Paint.Join.ROUND
+        paint.strokeCap = Paint.Cap.ROUND
+        // Outer diamond/map frame
+        val frame = Path().apply {
+            moveTo(s * 0.50f, s * 0.14f)
+            lineTo(s * 0.84f, s * 0.34f)
+            lineTo(s * 0.84f, s * 0.66f)
+            lineTo(s * 0.50f, s * 0.86f)
+            lineTo(s * 0.16f, s * 0.66f)
+            lineTo(s * 0.16f, s * 0.34f)
+            close()
         }
-        c.drawPath(routePath, paint)
-        // End pin (circle with dot)
-        paint.style = Paint.Style.STROKE
-        c.drawCircle(s * 0.72f, s * 0.22f, s * 0.10f, paint)
-        paint.style = Paint.Style.FILL
-        c.drawCircle(s * 0.72f, s * 0.22f, s * 0.04f, paint)
+        c.drawPath(frame, paint)
+        // Two horizontal fold lines (classic map icon)
+        c.drawLine(s*0.36f, s*0.22f, s*0.36f, s*0.78f, paint)
+        c.drawLine(s*0.64f, s*0.22f, s*0.64f, s*0.78f, paint)
         return bmp
     }
 
@@ -247,17 +255,17 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         val size = (44 * dp).toInt()
         val bmp = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888)
         val c = Canvas(bmp)
+        val s = size.toFloat()
         val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
-            color = Color.BLACK
+            color = Color.parseColor("#1A73E8")
             style = Paint.Style.FILL
         }
-        val s = size.toFloat()
-        // Navigation arrow pointing up (filled chevron/arrow like Waze)
+        // Navigation/recenter compass arrow (Google Maps "my location, follow" style)
         val arrow = Path().apply {
-            moveTo(s * 0.50f, s * 0.14f)   // tip
-            lineTo(s * 0.78f, s * 0.76f)   // bottom-right
-            lineTo(s * 0.50f, s * 0.60f)   // bottom-center indent
-            lineTo(s * 0.22f, s * 0.76f)   // bottom-left
+            moveTo(s * 0.50f, s * 0.12f)    // tip
+            lineTo(s * 0.80f, s * 0.82f)    // bottom-right
+            lineTo(s * 0.50f, s * 0.64f)    // notch center
+            lineTo(s * 0.20f, s * 0.82f)    // bottom-left
             close()
         }
         c.drawPath(arrow, paint)
@@ -295,12 +303,21 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         ))
 
         // ── ManeuverView — top ─────────────────────────────────────────────────
-        val mv = MapboxManeuverView(context)
+        // FIX: apply custom style with autoSizeTextType so long street names
+        // (e.g. "Wulmersumsesteenweg") shrink to fit instead of being clipped.
+        val mv = MapboxManeuverView(
+            android.view.ContextThemeWrapper(context, R.style.MapboxCustomManeuverViewStyle)
+        )
         root.addView(mv as View, FrameLayout.LayoutParams(
             FrameLayout.LayoutParams.MATCH_PARENT,
             FrameLayout.LayoutParams.WRAP_CONTENT
         ).also { it.gravity = Gravity.TOP })
         mv.visibility = View.INVISIBLE
+        // Feature: tap the instruction banner to see the full list of upcoming
+        // turn-by-turn steps. We emit the data via event so the RN/JS layer can
+        // render a bottom sheet or modal using its own native UI components —
+        // consistent with how all other navigation events are surfaced.
+        mv.setOnClickListener { emitFullRouteSteps() }
         maneuverView = mv
 
         // ── Side buttons — RIGHT side, just below maneuver banner ─────────────
@@ -336,17 +353,21 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         })
         btnOverviewView = overviewBtn
 
-        // Button 3: Recenter / Navigation arrow (hidden until in overview mode)
+        // Button 3: Recenter / return to follow mode — ALWAYS visible, below button 2
+        // Greyed out (lower opacity) when already following; full opacity in overview mode
         val recenterBtn = makeIconButton(drawNavigationArrowIcon()) { recenterCamera() }
-        recenterBtn.visibility = View.GONE
+        recenterBtn.alpha = 0.4f  // dimmed by default (already following)
         sideCol.addView(recenterBtn, LinearLayout.LayoutParams(btnSize, btnSize))
         btnRecenterView = recenterBtn
 
         // ── SpeedInfoView — bottom-left, above ETA bar ────────────────────────
+        // FIX: use WRAP_CONTENT instead of fixed 72x72dp — the native Mapbox
+        // component renders both the posted speed limit sign AND the current
+        // vehicle speed side-by-side, which needs flexible width
         val siv = MapboxSpeedInfoView(context)
         root.addView(siv as View, FrameLayout.LayoutParams(
-            (72 * dp).toInt(),
-            (72 * dp).toInt()
+            FrameLayout.LayoutParams.WRAP_CONTENT,
+            FrameLayout.LayoutParams.WRAP_CONTENT
         ).also {
             it.gravity = Gravity.BOTTOM or Gravity.START
             it.setMargins((12 * dp).toInt(), 0, 0, (88 * dp).toInt())
@@ -492,6 +513,11 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             viewportDataSource.followingPadding = followingPadding
             viewportDataSource.overviewPadding = overviewPadding
 
+            // Waze-style tilted 3D following view — also helps stabilize the
+            // visual framing since pitch reduces perceived jitter from GPS noise
+            viewportDataSource.options.followingFrameOptions.defaultPitch = 45.0
+            viewportDataSource.options.followingFrameOptions.maxZoom = 17.0
+
             navigationCamera = NavigationCamera(
                 mapView.mapboxMap,
                 mapView.camera,
@@ -601,7 +627,15 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             override fun onNewRawLocation(rawLocation: Location) {}
             override fun onNewLocationMatcherResult(result: LocationMatcherResult) {
                 val loc = result.enhancedLocation
-                navigationLocationProvider.changePosition(location = loc, keyPoints = result.keyPoints)
+                // ── FIX: Puck jitter / drift ──────────────────────────────────────
+                // Root cause (confirmed via Mapbox GitHub issue #4140):
+                // When keyPoints are passed to changePosition(), the puck animator
+                // splits the 1-second transition EVENLY across all keypoints in time,
+                // but the keypoints are NOT evenly spaced in distance. This causes the
+                // puck to speed up/slow down and visibly drift left/right off the
+                // route line, even on a perfectly straight road.
+                // Official Mapbox workaround: pass emptyList() instead of keyPoints.
+                navigationLocationProvider.changePosition(location = loc, keyPoints = emptyList())
                 viewportDataSource.onLocationChanged(loc)
                 viewportDataSource.evaluate()
 
@@ -610,6 +644,11 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                     safeCameraFollowing()
                 }
 
+                // ── Speed limit (issue #4: was not displaying) ──────────────────
+                // updatePostedAndCurrentSpeed returns null when:
+                //  1. The route response has no `maxspeed` annotation for this segment
+                //  2. GPS speed is unavailable
+                // We log this so issues can be diagnosed via `adb logcat`
                 val fmtOptions = DistanceFormatterOptions.Builder(context).build()
                 val speedInfo = speedInfoApi.updatePostedAndCurrentSpeed(result, fmtOptions)
                 if (speedInfo != null) {
@@ -617,6 +656,8 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                     speedInfoView?.render(speedInfo)
                 } else {
                     speedInfoView?.visibility = View.GONE
+                    Log.d(TAG, "Speed info unavailable for this location/route segment " +
+                        "(no maxspeed annotation or GPS speed not ready yet)")
                 }
 
                 checkAndSwitchDayNight()
@@ -643,7 +684,8 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             recenterCamera()
         } else {
             isOverviewMode = true
-            btnRecenterView?.visibility = View.VISIBLE
+            // Button 3 lights up (full opacity) to invite the user to tap it
+            btnRecenterView?.alpha = 1f
             try {
                 navigationCamera.requestNavigationCameraToOverview()
             } catch (e: Exception) {
@@ -654,7 +696,8 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
 
     private fun recenterCamera() {
         isOverviewMode = false
-        btnRecenterView?.visibility = View.GONE
+        // Button 3 dims again — already in following mode
+        btnRecenterView?.alpha = 0.4f
         safeCameraFollowing()
     }
 
@@ -713,7 +756,53 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         }
     }
 
-    private fun cancelNavigation() {
+    // ─────────────────────────────────────────────────────────────────────────
+    // Feature: full route steps list (triggered by tapping the instruction
+    // banner). Extracts every LegStep across all legs of the active route,
+    // including lane guidance data when present on that step's BannerInstructions.
+    // ─────────────────────────────────────────────────────────────────────────
+    private fun emitFullRouteSteps() {
+        val routes = mapboxNavigation?.getNavigationRoutes()
+        val activeRoute = routes?.firstOrNull() ?: run {
+            onManeuverBannerPressed(mapOf("steps" to emptyList<Map<String, Any>>()))
+            return
+        }
+
+        val stepsPayload = mutableListOf<Map<String, Any>>()
+
+        activeRoute.directionsRoute.legs()?.forEach { leg ->
+            leg.steps()?.forEach { step ->
+                val maneuver = step.maneuver()
+                val firstBanner = step.bannerInstructions()?.firstOrNull()
+
+                // Lane guidance: present on BannerInstructions.sub() when type == "lane"
+                val laneData = firstBanner?.sub()?.components()
+                    ?.filter { it.type() == "lane" }
+                    ?.map { component ->
+                        mapOf(
+                            "active" to (component.active() ?: false),
+                            "directions" to (component.directions() ?: emptyList<String>())
+                        )
+                    } ?: emptyList()
+
+                stepsPayload.add(
+                    mapOf(
+                        "instruction" to (maneuver?.instruction() ?: ""),
+                        "distanceMeters" to (step.distance() ?: 0.0),
+                        "durationSeconds" to (step.duration() ?: 0.0),
+                        "maneuverType" to (maneuver?.type() ?: ""),
+                        "maneuverModifier" to (maneuver?.modifier() ?: ""),
+                        "roadName" to (step.name() ?: ""),
+                        "laneInstructions" to laneData
+                    )
+                )
+            }
+        }
+
+        onManeuverBannerPressed(mapOf("steps" to stepsPayload))
+    }
+
+
         speechApi.cancel()
         voiceInstructionsPlayer.clear()
         mapboxNavigation?.setNavigationRoutes(listOf())
@@ -760,6 +849,21 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             .voiceUnits(resolveVoiceUnits())
             .coordinatesList(points)
             .annotations("maxspeed,congestion,duration,speed")
+            // ── FIX: Lane guidance was not displaying ───────────────────────────
+            // Root cause: BannerInstructions.sub() (which carries lane data) is
+            // only returned by the Directions API when explicitly requested.
+            // applyDefaultNavigationOptions() does set bannerInstructions(true)
+            // internally, but several confirmed cases (Mapbox GitHub issue #7377,
+            // "Lane guidance not showing, using Navigation Drop-in UI") show this
+            // needs to be set explicitly to reliably trigger lane data in the
+            // response — official Mapbox examples do the same as a defensive fix.
+            .bannerInstructions(true)
+            // steps(true) is required for any BannerInstructions/VoiceInstructions
+            // to be present in the response at all.
+            .steps(true)
+            // roundaboutExits(true) ensures lane + exit guidance is generated for
+            // roundabout maneuvers specifically (separate flag from bannerInstructions).
+            .roundaboutExits(true)
         waypointIndices?.let { builder.waypointIndicesList(it) }
         navigationProfile?.let { builder.profile(if (it.startsWith("mapbox/")) it else "mapbox/$it") }
         excludeTypes?.takeIf { it.isNotEmpty() }?.let { builder.exclude(it.joinToString(",")) }

package/android/src/main/res/values/styles.xml

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!--
+        FIX: Street/road name text was being cut off on the instruction banner
+        (e.g. "Wulmersumsesteenwe" instead of "Wulmersumsesteenweg") on
+        narrower or smaller-DPI screens.
+
+        Root cause: MapboxPrimaryManeuver (the road name text view inside
+        MapboxManeuverView) uses a fixed text size by default with no
+        auto-shrink behavior, so long street names get clipped by ellipsis
+        instead of adapting to the available banner width.
+
+        Fix: define a custom text appearance with Android's built-in
+        autoSizeTextType="uniform", which lets the system shrink the text
+        size step-by-step (within autoSizeMinTextSize..autoSizeMaxTextSize)
+        until the full string fits the view width — exactly like Waze/Google
+        Maps adapt their instruction banner text across different phone
+        screen sizes.
+    -->
+    <style name="MapboxCustomManeuverTextStyle" parent="MapboxStylePrimaryManeuver">
+        <item name="android:autoSizeTextType">uniform</item>
+        <item name="android:autoSizeMinTextSize">16sp</item>
+        <item name="android:autoSizeMaxTextSize">28sp</item>
+        <item name="android:autoSizeStepGranularity">1sp</item>
+        <item name="android:maxLines">2</item>
+        <item name="android:ellipsize">end</item>
+    </style>
+
+    <!--
+        Custom MapboxManeuverView style that:
+          1. Applies the auto-sizing primary maneuver text style above.
+          2. Keeps default backgrounds/colors (day mode handled by Nav SDK
+             style switching already implemented in ExpoMapboxNavigationView).
+    -->
+    <style name="MapboxCustomManeuverViewStyle" parent="MapboxStyleManeuverView">
+        <item name="primaryManeuverTextAppearance">@style/MapboxCustomManeuverTextStyle</item>
+    </style>
+
+</resources>

package/build/index.d.ts

@@ -84,6 +84,14 @@ export interface MapboxNavigationViewProps {
     onArrival?: (event: {
         nativeEvent: {};
     }) => void;
+    /**
+     * Fired when the user taps the turn-by-turn instruction banner.
+     * Use this to open a bottom sheet / modal listing every upcoming step
+     * of the route, including lane guidance data where available.
+     */
+    onManeuverBannerPressed?: (event: {
+        nativeEvent: ManeuverBannerPressedEvent;
+    }) => void;
     style?: ViewStyle;
 }
 export interface RouteProgressEvent {
@@ -98,6 +106,33 @@ export interface RoutesReadyEvent {
     distanceMeters: number;
     durationSeconds: number;
 }
+/** A single lane's directional options at an upcoming intersection. */
+export interface LaneInstruction {
+    /** Whether this lane is the recommended lane for the upcoming maneuver. */
+    active: boolean;
+    /** Directions this lane allows, e.g. ["straight"], ["left"], ["straight", "right"]. */
+    directions: string[];
+}
+/** One step (maneuver) along the route, used for the full-route steps list. */
+export interface RouteStep {
+    /** Human-readable instruction text, e.g. "Turn left onto Main St". */
+    instruction: string;
+    /** Distance in metres for this step. */
+    distanceMeters: number;
+    /** Duration in seconds for this step. */
+    durationSeconds: number;
+    /** Directions API maneuver type, e.g. "turn", "merge", "roundabout". */
+    maneuverType: string;
+    /** Directions API maneuver modifier, e.g. "left", "right", "straight". */
+    maneuverModifier: string;
+    /** Name of the road for this step, if available. */
+    roadName: string;
+    /** Lane guidance for this step's upcoming maneuver, if available. */
+    laneInstructions: LaneInstruction[];
+}
+export interface ManeuverBannerPressedEvent {
+    steps: RouteStep[];
+}
 /**
  * MapboxNavigationView
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jacques_gordon/expo-mapbox-navigation",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "Expo module for Mapbox Navigation SDK with 16KB page size support, NDK27, and Mapbox Maps v11.11.0+",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/src/index.tsx

@@ -104,6 +104,13 @@ export interface MapboxNavigationViewProps {
   onRoutesFailed?: (event: { nativeEvent: { message: string } }) => void;
   onArrival?: (event: { nativeEvent: {} }) => void;
 
+  /**
+   * Fired when the user taps the turn-by-turn instruction banner.
+   * Use this to open a bottom sheet / modal listing every upcoming step
+   * of the route, including lane guidance data where available.
+   */
+  onManeuverBannerPressed?: (event: { nativeEvent: ManeuverBannerPressedEvent }) => void;
+
   style?: ViewStyle;
 }
 
@@ -121,6 +128,36 @@ export interface RoutesReadyEvent {
   durationSeconds: number;
 }
 
+/** A single lane's directional options at an upcoming intersection. */
+export interface LaneInstruction {
+  /** Whether this lane is the recommended lane for the upcoming maneuver. */
+  active: boolean;
+  /** Directions this lane allows, e.g. ["straight"], ["left"], ["straight", "right"]. */
+  directions: string[];
+}
+
+/** One step (maneuver) along the route, used for the full-route steps list. */
+export interface RouteStep {
+  /** Human-readable instruction text, e.g. "Turn left onto Main St". */
+  instruction: string;
+  /** Distance in metres for this step. */
+  distanceMeters: number;
+  /** Duration in seconds for this step. */
+  durationSeconds: number;
+  /** Directions API maneuver type, e.g. "turn", "merge", "roundabout". */
+  maneuverType: string;
+  /** Directions API maneuver modifier, e.g. "left", "right", "straight". */
+  maneuverModifier: string;
+  /** Name of the road for this step, if available. */
+  roadName: string;
+  /** Lane guidance for this step's upcoming maneuver, if available. */
+  laneInstructions: LaneInstruction[];
+}
+
+export interface ManeuverBannerPressedEvent {
+  steps: RouteStep[];
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Native view
 // ─────────────────────────────────────────────────────────────────────────────