@jacques_gordon/expo-mapbox-navigation 2.1.0 → 2.1.2

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

@@ -2,6 +2,7 @@ package expo.modules.mapboxnavigation
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.content.res.Resources
 import android.graphics.Color
 import android.util.Log
 import android.view.Gravity
@@ -12,6 +13,7 @@ import android.widget.TextView
 import com.mapbox.api.directions.v5.models.RouteOptions
 import com.mapbox.common.location.Location
 import com.mapbox.geojson.Point
+import com.mapbox.maps.EdgeInsets
 import com.mapbox.maps.MapView
 import com.mapbox.maps.plugin.animation.camera
 import com.mapbox.maps.plugin.locationcomponent.location
@@ -35,7 +37,6 @@ import com.mapbox.navigation.tripdata.maneuver.api.MapboxManeuverApi
 import com.mapbox.navigation.tripdata.progress.api.MapboxTripProgressApi
 import com.mapbox.navigation.tripdata.progress.model.DistanceRemainingFormatter
 import com.mapbox.navigation.tripdata.progress.model.EstimatedTimeToArrivalFormatter
-import com.mapbox.navigation.tripdata.progress.model.PercentDistanceTraveledFormatter
 import com.mapbox.navigation.tripdata.progress.model.TimeRemainingFormatter
 import com.mapbox.navigation.tripdata.progress.model.TripProgressUpdateFormatter
 import com.mapbox.navigation.tripdata.speedlimit.api.MapboxSpeedInfoApi
@@ -65,7 +66,7 @@ private const val TAG = "ExpoMapboxNavigation"
 class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     ExpoView(context, appContext) {
 
-    // ── EventDispatchers (correct Expo Modules API for View events) ───────────
+    // ── EventDispatchers ──────────────────────────────────────────────────────
     private val onRouteProgressChanged by EventDispatcher()
     private val onRoutesReady by EventDispatcher()
     private val onNavigationFinished by EventDispatcher()
@@ -83,7 +84,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private var tvDistance: TextView? = null
     private var etaBar: LinearLayout? = null
 
-    // ── Navigation APIs (from official TurnByTurnExperienceActivity) ──────────
+    // ── Navigation APIs ───────────────────────────────────────────────────────
     private lateinit var navigationCamera: NavigationCamera
     private lateinit var viewportDataSource: MapboxNavigationViewportDataSource
     private lateinit var routeLineApi: MapboxRouteLineApi
@@ -95,10 +96,31 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private lateinit var routeArrowView: MapboxRouteArrowView
     private val navigationLocationProvider = NavigationLocationProvider()
     private var mapboxNavigation: MapboxNavigation? = null
-
-    // ── Night mode ────────────────────────────────────────────────────────────
     private var isNightMode = false
 
+    // ── FIX: Track whether first location has been received ───────────────────
+    // Without this, camera never enters following mode on first GPS fix
+    private var firstLocationReceived = false
+
+    // ── Viewport padding (from official TurnByTurnExperienceActivity) ─────────
+    private val pixelDensity = Resources.getSystem().displayMetrics.density
+    private val followingPadding by lazy {
+        EdgeInsets(
+            180.0 * pixelDensity,  // top — room for maneuver banner
+            40.0 * pixelDensity,
+            150.0 * pixelDensity,  // bottom — room for ETA bar
+            40.0 * pixelDensity
+        )
+    }
+    private val overviewPadding by lazy {
+        EdgeInsets(
+            140.0 * pixelDensity,
+            40.0 * pixelDensity,
+            120.0 * pixelDensity,
+            40.0 * pixelDensity
+        )
+    }
+
     // ── Props ─────────────────────────────────────────────────────────────────
     private var coordinates: List<Map<String, Double>> = emptyList()
     private var waypointIndices: List<Int>? = null
@@ -121,7 +143,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // 1. Build programmatic UI
+    // Build UI
     // ─────────────────────────────────────────────────────────────────────────
     private fun buildUI() {
         val dp = context.resources.displayMetrics.density
@@ -129,108 +151,123 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
         }
 
-        // Full-screen MapView
+        // Full screen map
         root.addView(mapView, FrameLayout.LayoutParams(
             FrameLayout.LayoutParams.MATCH_PARENT,
             FrameLayout.LayoutParams.MATCH_PARENT
         ))
 
-        // ManeuverView — top banner
-        // NOTE: MapboxManeuverView extends ConstraintLayout, cast to View for addView()
+        // ── ManeuverView — top banner ──────────────────────────────────────────
+        // extends ConstraintLayout → must cast to View for addView()
         val mv = MapboxManeuverView(context)
-        val mvParams = FrameLayout.LayoutParams(
+        root.addView(mv as View, FrameLayout.LayoutParams(
             FrameLayout.LayoutParams.MATCH_PARENT,
             FrameLayout.LayoutParams.WRAP_CONTENT
-        )
-        mvParams.gravity = Gravity.TOP
-        mv.visibility = View.INVISIBLE  // matches official example (INVISIBLE not GONE)
-        root.addView(mv as View, mvParams)
+        ).also { it.gravity = Gravity.TOP })
+        mv.visibility = View.INVISIBLE
         maneuverView = mv
 
-        // SpeedInfoView — bottom-left
+        // ── SpeedInfoView — bottom-left ────────────────────────────────────────
+        // Shows posted speed limit + current vehicle speed
         val siv = MapboxSpeedInfoView(context)
-        val sivParams = FrameLayout.LayoutParams(
+        root.addView(siv as View, FrameLayout.LayoutParams(
             FrameLayout.LayoutParams.WRAP_CONTENT,
             FrameLayout.LayoutParams.WRAP_CONTENT
-        )
-        sivParams.gravity = Gravity.BOTTOM or Gravity.START
-        sivParams.setMargins((16 * dp).toInt(), 0, 0, (100 * dp).toInt())
+        ).also {
+            it.gravity = Gravity.BOTTOM or Gravity.START
+            // Position above the ETA bar (80dp) + margin
+            it.setMargins((16 * dp).toInt(), 0, 0, (96 * dp).toInt())
+        })
         siv.visibility = View.GONE
-        root.addView(siv as View, sivParams)
         speedInfoView = siv
 
-        // TripProgressView — embedded in bottom bar
-        val tpv = MapboxTripProgressView(context)
-        tripProgressView = tpv
-
-        // ETA bottom bar
+        // ── ETA bottom bar ─────────────────────────────────────────────────────
         val bar = LinearLayout(context).apply {
             orientation = LinearLayout.HORIZONTAL
-            setBackgroundColor(Color.WHITE)
+            setBackgroundColor(Color.parseColor("#1E2433"))  // dark nav style
             elevation = 8 * dp
             visibility = View.INVISIBLE
             gravity = Gravity.CENTER_VERTICAL
             setPadding(
-                (16 * dp).toInt(), (8 * dp).toInt(),
-                (16 * dp).toInt(), (8 * dp).toInt()
+                (16 * dp).toInt(), (12 * dp).toInt(),
+                (16 * dp).toInt(), (12 * dp).toInt()
             )
         }
-        val barParams = FrameLayout.LayoutParams(
+        root.addView(bar, FrameLayout.LayoutParams(
             FrameLayout.LayoutParams.MATCH_PARENT,
-            (80 * dp).toInt()
-        )
-        barParams.gravity = Gravity.BOTTOM
+            FrameLayout.LayoutParams.WRAP_CONTENT
+        ).also { it.gravity = Gravity.BOTTOM })
 
+        // ETA arrival time
         val etaTime = TextView(context).apply {
-            textSize = 22f
-            setTextColor(Color.BLACK)
+            textSize = 24f
+            setTextColor(Color.WHITE)
             typeface = android.graphics.Typeface.DEFAULT_BOLD
         }
-        bar.addView(etaTime, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f))
+        bar.addView(etaTime, LinearLayout.LayoutParams(
+            0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f
+        ))
         tvEtaTime = etaTime
 
+        // Duration + distance (center)
         val center = LinearLayout(context).apply {
             orientation = LinearLayout.VERTICAL
             gravity = Gravity.CENTER
         }
-        val dur = TextView(context).apply { textSize = 16f; setTextColor(Color.DKGRAY); gravity = Gravity.CENTER }
-        val dist = TextView(context).apply { textSize = 13f; setTextColor(Color.GRAY); gravity = Gravity.CENTER }
+        val dur = TextView(context).apply {
+            textSize = 18f
+            setTextColor(Color.WHITE)
+            typeface = android.graphics.Typeface.DEFAULT_BOLD
+            gravity = Gravity.CENTER
+        }
+        val dist = TextView(context).apply {
+            textSize = 13f
+            setTextColor(Color.parseColor("#AAAAAA"))
+            gravity = Gravity.CENTER
+        }
         center.addView(dur)
         center.addView(dist)
-        bar.addView(center, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 2f))
+        bar.addView(center, LinearLayout.LayoutParams(
+            0, LinearLayout.LayoutParams.WRAP_CONTENT, 2f
+        ))
         tvDuration = dur
         tvDistance = dist
 
+        // Cancel button
         val cancelBtn = TextView(context).apply {
             text = "✕"
             textSize = 22f
-            setTextColor(Color.DKGRAY)
+            setTextColor(Color.parseColor("#AAAAAA"))
             gravity = Gravity.END or Gravity.CENTER_VERTICAL
             setOnClickListener { cancelNavigation() }
         }
-        bar.addView(cancelBtn, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f))
+        bar.addView(cancelBtn, LinearLayout.LayoutParams(
+            0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f
+        ))
         etaBar = bar
-        root.addView(bar, barParams)
+
+        // ── TripProgressView — hidden native view (used for render() API) ──────
+        // FIX: was created but never added to root — now added but invisible
+        val tpv = MapboxTripProgressView(context)
+        root.addView(tpv as View, FrameLayout.LayoutParams(1, 1))  // 1x1 hidden
+        tpv.visibility = View.GONE
+        tripProgressView = tpv
 
         addView(root)
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // 2. Init APIs (from official example — exact same pattern)
+    // Init APIs
     // ─────────────────────────────────────────────────────────────────────────
     private fun initAPIs() {
         val distanceFormatterOptions = DistanceFormatterOptions.Builder(context).build()
 
-        // EXACT same instantiation as TurnByTurnExperienceActivity
-        maneuverApi = MapboxManeuverApi(
-            MapboxDistanceFormatter(distanceFormatterOptions)
-        )
+        maneuverApi = MapboxManeuverApi(MapboxDistanceFormatter(distanceFormatterOptions))
 
         tripProgressApi = MapboxTripProgressApi(
             TripProgressUpdateFormatter.Builder(context)
                 .distanceRemainingFormatter(DistanceRemainingFormatter(distanceFormatterOptions))
                 .timeRemainingFormatter(TimeRemainingFormatter(context))
-                .percentRouteTraveledFormatter(PercentDistanceTraveledFormatter())
                 .estimatedTimeToArrivalFormatter(
                     EstimatedTimeToArrivalFormatter(context, TimeFormat.NONE_SPECIFIED)
                 )
@@ -239,32 +276,35 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
 
         speedInfoApi = MapboxSpeedInfoApi()
 
-        val routeLineViewOptions = MapboxRouteLineViewOptions.Builder(context)
-            .routeLineBelowLayerId("road-label-navigation")
-            .build()
         routeLineApi = MapboxRouteLineApi(MapboxRouteLineApiOptions.Builder().build())
-        routeLineView = MapboxRouteLineView(routeLineViewOptions)
+        routeLineView = MapboxRouteLineView(
+            MapboxRouteLineViewOptions.Builder(context)
+                .routeLineBelowLayerId("road-label-navigation")
+                .build()
+        )
 
-        val routeArrowOptions = RouteArrowOptions.Builder(context).build()
-        routeArrowView = MapboxRouteArrowView(routeArrowOptions)
+        routeArrowView = MapboxRouteArrowView(RouteArrowOptions.Builder(context).build())
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // 3. Setup Navigation
+    // Setup Navigation
     // ─────────────────────────────────────────────────────────────────────────
     private fun setupNavigation() {
         mapboxNavigation = MapboxNavigationProvider.create(
             NavigationOptions.Builder(context).build()
         )
 
-        val style = mapStyle ?: getAutoStyle()
-        mapView.mapboxMap.loadStyle(style) { mapStyle ->
-
-            // Route line layers must be initialized first
-            routeLineView.initializeLayers(mapStyle)
+        mapView.mapboxMap.loadStyle(mapStyle ?: getAutoStyle()) { style ->
+            routeLineView.initializeLayers(style)
 
-            // Camera setup — EXACT same as official example
+            // Camera viewport data source
             viewportDataSource = MapboxNavigationViewportDataSource(mapView.mapboxMap)
+
+            // FIX: Set padding BEFORE creating NavigationCamera
+            // Without this, the camera doesn't account for the maneuver banner and ETA bar
+            viewportDataSource.followingPadding = followingPadding
+            viewportDataSource.overviewPadding = overviewPadding
+
             navigationCamera = NavigationCamera(
                 mapView.mapboxMap,
                 mapView.camera,
@@ -282,7 +322,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // 4. Observers — based 100% on official TurnByTurnExperienceActivity
+    // Observers
     // ─────────────────────────────────────────────────────────────────────────
     private fun registerObservers() {
         val nav = mapboxNavigation ?: return
@@ -291,19 +331,18 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         nav.registerRoutesObserver(object : RoutesObserver {
             override fun onRoutesChanged(result: RoutesUpdatedResult) {
                 if (result.navigationRoutes.isNotEmpty()) {
-                    // Draw route line
                     routeLineApi.setNavigationRoutes(result.navigationRoutes) { value ->
                         mapView.mapboxMap.style?.apply {
                             routeLineView.renderRouteDrawData(this, value)
                         }
                     }
-                    // Update camera viewport
                     viewportDataSource.onRouteChanged(result.navigationRoutes.first())
                     viewportDataSource.evaluate()
 
-                    // Show navigation UI
-                    maneuverView?.visibility = View.VISIBLE
-                    etaBar?.visibility = View.VISIBLE
+                    // FIX: transition to following mode when route is set
+                    // This triggers the camera to zoom/pitch/center correctly
+                    safeCameraFollowing()
+                    showUI()
 
                     onRoutesReady(mapOf(
                         "routeCount" to result.navigationRoutes.size,
@@ -311,9 +350,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                         "durationSeconds" to (result.navigationRoutes.first().directionsRoute.duration() ?: 0.0)
                     ))
                 } else {
-                    // Clear route line
-                    val style = mapView.mapboxMap.style
-                    if (style != null) {
+                    mapView.mapboxMap.style?.let { style ->
                         routeLineApi.clearRouteLine { value ->
                             routeLineView.renderClearRouteLineValue(style, value)
                         }
@@ -327,38 +364,40 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         })
 
         // ── Route progress observer ───────────────────────────────────────────
-        // EXACT same pattern as TurnByTurnExperienceActivity.routeProgressObserver
         nav.registerRouteProgressObserver(RouteProgressObserver { routeProgress ->
-            // Update camera
+            // Update viewport with progress (camera follows route progress)
             viewportDataSource.onRouteProgressChanged(routeProgress)
             viewportDataSource.evaluate()
 
             // Draw maneuver arrow
-            val style = mapView.mapboxMap.style
-            if (style != null) {
-                val maneuverArrowResult = routeArrowApi.addUpcomingManeuverArrow(routeProgress)
-                routeArrowView.renderManeuverUpdate(style, maneuverArrowResult)
+            mapView.mapboxMap.style?.let { style ->
+                val arrowResult = routeArrowApi.addUpcomingManeuverArrow(routeProgress)
+                routeArrowView.renderManeuverUpdate(style, arrowResult)
             }
 
-            // Maneuver banner — EXACT same fold() pattern as official example
+            // Maneuver banner
             val maneuvers = maneuverApi.getManeuvers(routeProgress)
             maneuvers.fold(
-                { error -> Log.w(TAG, "Maneuver error: ${error.errorMessage}") },
-                {
+                { error ->
+                    Log.w(TAG, "Maneuver error: ${error.errorMessage}")
+                    Unit
+                },
+                { _ ->
                     maneuverView?.visibility = View.VISIBLE
                     maneuverView?.renderManeuvers(maneuvers)
+                    Unit
                 }
             )
 
-            // Trip progress — EXACT same as official example
-            // getTripProgress returns TripProgressUpdateValue directly (not nullable)
+            // Trip progress
             val tripProgress = tripProgressApi.getTripProgress(routeProgress)
             tripProgressView?.render(tripProgress)
+            updateEtaBar(
+                tripProgress.estimatedTimeToArrival,
+                tripProgress.totalTimeRemaining,
+                tripProgress.distanceRemaining
+            )
 
-            // Update our custom ETA bar from tripProgress fields
-            updateEtaBar(tripProgress)
-
-            // Emit event
             onRouteProgressChanged(mapOf(
                 "distanceRemaining" to routeProgress.distanceRemaining,
                 "durationRemaining" to routeProgress.durationRemaining,
@@ -371,29 +410,33 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         })
 
         // ── Location observer ─────────────────────────────────────────────────
-        // EXACT same as official example
         nav.registerLocationObserver(object : LocationObserver {
             override fun onNewRawLocation(rawLocation: Location) {}
 
-            override fun onNewLocationMatcherResult(locationMatcherResult: LocationMatcherResult) {
-                val enhancedLocation = locationMatcherResult.enhancedLocation
+            override fun onNewLocationMatcherResult(result: LocationMatcherResult) {
+                val loc = result.enhancedLocation
 
-                // Update location puck
+                // Update location puck position
                 navigationLocationProvider.changePosition(
-                    location = enhancedLocation,
-                    keyPoints = locationMatcherResult.keyPoints,
+                    location = loc,
+                    keyPoints = result.keyPoints,
                 )
 
-                // Update camera
-                viewportDataSource.onLocationChanged(enhancedLocation)
+                // FIX: Update viewport data source with location AND bearing
+                // This is what drives the camera to follow the vehicle's direction
+                viewportDataSource.onLocationChanged(loc)
                 viewportDataSource.evaluate()
 
-                // Speed limit display
-                val formatterOptions = DistanceFormatterOptions.Builder(context).build()
-                val speedInfo = speedInfoApi.updatePostedAndCurrentSpeed(
-                    locationMatcherResult,
-                    formatterOptions
-                )
+                // FIX: On first location fix, immediately enter following mode
+                // This ensures the camera centers on the user as soon as GPS is available
+                if (!firstLocationReceived) {
+                    firstLocationReceived = true
+                    safeCameraFollowing()
+                }
+
+                // ── Speed limit display ────────────────────────────────────────
+                val fmtOptions = DistanceFormatterOptions.Builder(context).build()
+                val speedInfo = speedInfoApi.updatePostedAndCurrentSpeed(result, fmtOptions)
                 if (speedInfo != null) {
                     speedInfoView?.visibility = View.VISIBLE
                     speedInfoView?.render(speedInfo)
@@ -401,45 +444,46 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                     speedInfoView?.visibility = View.GONE
                 }
 
-                // Auto day/night switch
                 checkAndSwitchDayNight()
             }
         })
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // 5. ETA bar update
-    // TripProgressUpdateValue fields confirmed from official tripdata API
+    // ETA bar update
+    // Fields confirmed from TripProgressUpdateValue docs:
+    //   estimatedTimeToArrival: Long — Unix timestamp ms
+    //   totalTimeRemaining: Double — seconds
+    //   distanceRemaining: Double — metres
     // ─────────────────────────────────────────────────────────────────────────
-    private fun updateEtaBar(tripProgress: com.mapbox.navigation.tripdata.progress.model.TripProgressUpdateValue) {
-        // ETA arrival time
-        val etaSec = tripProgress.formatter.timeRemainingFormatter
-            .formatTime(tripProgress).toString()
-        // Calculate arrival clock time
-        val totalSec = tripProgress.totalTimeRemaining.toLong()
-        val cal = Calendar.getInstance().apply { add(Calendar.SECOND, totalSec.toInt()) }
-        tvEtaTime?.text = String.format("%02d:%02d",
-            cal.get(Calendar.HOUR_OF_DAY),
-            cal.get(Calendar.MINUTE)
+    private fun updateEtaBar(
+        estimatedTimeToArrivalMs: Long,
+        totalTimeRemainingSec: Double,
+        distanceRemainingMetres: Double
+    ) {
+        val arrivalCal = Calendar.getInstance().apply {
+            timeInMillis = estimatedTimeToArrivalMs
+        }
+        tvEtaTime?.text = String.format(
+            "%02d:%02d",
+            arrivalCal.get(Calendar.HOUR_OF_DAY),
+            arrivalCal.get(Calendar.MINUTE)
         )
 
-        // Duration remaining
-        val totalMin = (tripProgress.totalTimeRemaining / 60).toInt()
+        val totalMin = (totalTimeRemainingSec / 60).toInt()
         tvDuration?.text = if (totalMin >= 60)
             "${totalMin / 60}h ${totalMin % 60}min"
         else
             "${totalMin} min"
 
-        // Distance remaining
-        val distM = tripProgress.distanceRemaining
-        tvDistance?.text = if (distM >= 1000)
-            String.format("%.1f km", distM / 1000.0)
+        tvDistance?.text = if (distanceRemainingMetres >= 1000)
+            String.format("%.1f km", distanceRemainingMetres / 1000.0)
         else
-            "${distM.toInt()} m"
+            "${distanceRemainingMetres.toInt()} m"
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // 6. Day / Night auto switch
+    // Day / Night auto switch
     // ─────────────────────────────────────────────────────────────────────────
     private fun getAutoStyle(): String {
         val hour = Calendar.getInstance().get(Calendar.HOUR_OF_DAY)
@@ -452,10 +496,8 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         val shouldBeNight = hour !in 6..20
         if (shouldBeNight == isNightMode) return
         isNightMode = shouldBeNight
-
         val newStyle = if (shouldBeNight) NavigationStyles.NAVIGATION_NIGHT_STYLE
         else NavigationStyles.NAVIGATION_DAY_STYLE
-
         mapView.mapboxMap.loadStyle(newStyle) { style ->
             routeLineView.initializeLayers(style)
             mapboxNavigation?.getNavigationRoutes()?.takeIf { it.isNotEmpty() }?.let { routes ->
@@ -464,26 +506,40 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                 }
             }
         }
+    }
 
-        etaBar?.setBackgroundColor(
-            if (shouldBeNight) Color.parseColor("#1E2433") else Color.WHITE
-        )
-        val tc = if (shouldBeNight) Color.WHITE else Color.BLACK
-        tvEtaTime?.setTextColor(tc)
-        tvDuration?.setTextColor(if (shouldBeNight) Color.LTGRAY else Color.DKGRAY)
-        tvDistance?.setTextColor(Color.GRAY)
+    // ─────────────────────────────────────────────────────────────────────────
+    // Camera following — safe wrapper (issue #43)
+    // FIX: maxDuration(0) = instant transition, no animation delay
+    // ─────────────────────────────────────────────────────────────────────────
+    private fun safeCameraFollowing() {
+        try {
+            navigationCamera.requestNavigationCameraToFollowing(
+                stateTransitionOptions = NavigationCameraTransitionOptions.Builder()
+                    .maxDuration(0)
+                    .build()
+            )
+        } catch (e: Exception) {
+            Log.e(TAG, "Camera following error: ${e.message}")
+        }
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // 7. Cancel navigation
+    // Cancel navigation — also stops foreground service (fixes notification crash)
     // ─────────────────────────────────────────────────────────────────────────
     private fun cancelNavigation() {
         mapboxNavigation?.setNavigationRoutes(listOf())
         mapboxNavigation?.stopTripSession()
+        firstLocationReceived = false
         hideUI()
         onNavigationCancelled(mapOf<String, Any>())
     }
 
+    private fun showUI() {
+        maneuverView?.visibility = View.VISIBLE
+        etaBar?.visibility = View.VISIBLE
+    }
+
     private fun hideUI() {
         maneuverView?.visibility = View.INVISIBLE
         speedInfoView?.visibility = View.GONE
@@ -491,22 +547,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // 8. Issue #43 — safe camera following
-    // ─────────────────────────────────────────────────────────────────────────
-    private fun safeCameraFollowing() {
-        try {
-            navigationCamera.requestNavigationCameraToFollowing(
-                stateTransitionOptions = NavigationCameraTransitionOptions.Builder()
-                    .maxDuration(0)
-                    .build()
-            )
-        } catch (e: Exception) {
-            Log.e(TAG, "Camera transition error: ${e.message}")
-        }
-    }
-
-    // ─────────────────────────────────────────────────────────────────────────
-    // 9. Issue #31 — Voice units
+    // Issue #31 — Voice units
     // ─────────────────────────────────────────────────────────────────────────
     private fun resolveVoiceUnits(): String {
         return when (voiceUnits?.lowercase()) {
@@ -520,15 +561,15 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // 10. Route request
+    // Route request
     // ─────────────────────────────────────────────────────────────────────────
     @SuppressLint("MissingPermission")
     private fun fetchRoutes() {
         val nav = mapboxNavigation ?: return
         if (coordinates.size < 2) return
 
-        val points = coordinates.map { coord ->
-            Point.fromLngLat(coord["longitude"] ?: 0.0, coord["latitude"] ?: 0.0)
+        val points = coordinates.map {
+            Point.fromLngLat(it["longitude"] ?: 0.0, it["latitude"] ?: 0.0)
         }
         val locale = language?.let { Locale.forLanguageTag(it) } ?: Locale.getDefault()
 
@@ -537,46 +578,47 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             .language(locale.toLanguageTag())
             .voiceUnits(resolveVoiceUnits())
             .coordinatesList(points)
+            // maxspeed annotation required for speed limit display
             .annotations("maxspeed,congestion,duration")
 
         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(",")) }
+        excludeTypes?.takeIf { it.isNotEmpty() }?.let {
+            builder.exclude(it.joinToString(","))
+        }
         maxHeight?.let { builder.maxHeight(it) }
         maxWidth?.let { builder.maxWidth(it) }
 
-        nav.requestRoutes(
-            builder.build(),
-            object : NavigationRouterCallback {
-                override fun onRoutesReady(
-                    routes: List<NavigationRoute>,
-                    @RouterOrigin routerOrigin: String
-                ) {
-                    if (routes.isEmpty()) {
-                        onRoutesFailed(mapOf("message" to "No routes returned"))
-                        return
-                    }
-                    nav.setNavigationRoutes(routes)
-                    nav.startTripSession()
-                    safeCameraFollowing()
+        nav.requestRoutes(builder.build(), object : NavigationRouterCallback {
+            override fun onRoutesReady(
+                routes: List<NavigationRoute>,
+                @RouterOrigin routerOrigin: String
+            ) {
+                if (routes.isEmpty()) {
+                    onRoutesFailed(mapOf("message" to "No routes returned"))
+                    return
                 }
+                nav.setNavigationRoutes(routes)
+                nav.startTripSession()
+                // Camera will follow automatically via onNewLocationMatcherResult
+                // + onRoutesChanged observer
+            }
 
-                override fun onFailure(reasons: List<RouterFailure>, routeOptions: RouteOptions) {
-                    val msg = reasons.firstOrNull()?.message ?: "Unknown error"
-                    Log.e(TAG, "Route request failed: $msg")
-                    onRoutesFailed(mapOf("message" to msg))
-                }
+            override fun onFailure(reasons: List<RouterFailure>, routeOptions: RouteOptions) {
+                val msg = reasons.firstOrNull()?.message ?: "Unknown error"
+                Log.e(TAG, "Route failed: $msg")
+                onRoutesFailed(mapOf("message" to msg))
+            }
 
-                override fun onCanceled(
-                    routeOptions: RouteOptions,
-                    @RouterOrigin routerOrigin: String
-                ) {
-                    Log.d(TAG, "Route request cancelled")
-                }
+            override fun onCanceled(
+                routeOptions: RouteOptions,
+                @RouterOrigin routerOrigin: String
+            ) {
+                Log.d(TAG, "Route cancelled")
             }
-        )
+        })
     }
 
     // ── Prop setters ──────────────────────────────────────────────────────────
@@ -584,18 +626,18 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         coordinates = coords
         if (coords.size >= 2) fetchRoutes()
     }
-    fun setWaypointIndices(indices: List<Int>?) { waypointIndices = indices }
-    fun setLanguage(lang: String?) { language = lang }
-    fun setVoiceUnits(units: String?) { voiceUnits = units }
-    fun setNavigationProfile(profile: String?) { navigationProfile = profile }
-    fun setExcludeTypes(types: List<String>?) { excludeTypes = types }
-    fun setMapStyle(style: String?) { mapStyle = style }
-    fun setMute(shouldMute: Boolean) { mute = shouldMute }
-    fun setMaxHeight(height: Double?) { maxHeight = height }
-    fun setMaxWidth(width: Double?) { maxWidth = width }
-    fun setUseMapMatching(use: Boolean) { useMapMatching = use }
-    fun setCustomRasterTileUrl(url: String?) { customRasterTileUrl = url }
-    fun setCustomRasterAboveLayerId(layerId: String?) { customRasterAboveLayerId = layerId }
+    fun setWaypointIndices(i: List<Int>?) { waypointIndices = i }
+    fun setLanguage(l: String?) { language = l }
+    fun setVoiceUnits(u: String?) { voiceUnits = u }
+    fun setNavigationProfile(p: String?) { navigationProfile = p }
+    fun setExcludeTypes(t: List<String>?) { excludeTypes = t }
+    fun setMapStyle(s: String?) { mapStyle = s }
+    fun setMute(m: Boolean) { mute = m }
+    fun setMaxHeight(h: Double?) { maxHeight = h }
+    fun setMaxWidth(w: Double?) { maxWidth = w }
+    fun setUseMapMatching(u: Boolean) { useMapMatching = u }
+    fun setCustomRasterTileUrl(u: String?) { customRasterTileUrl = u }
+    fun setCustomRasterAboveLayerId(l: String?) { customRasterAboveLayerId = l }
 
     // ── Lifecycle ─────────────────────────────────────────────────────────────
     override fun onDetachedFromWindow() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jacques_gordon/expo-mapbox-navigation",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "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",