@jacques_gordon/expo-mapbox-navigation 2.0.9 → 2.1.1

package/android/build.gradle

@@ -13,12 +13,6 @@ android {
     defaultConfig {
         minSdkVersion safeExtGet("minSdkVersion", 24)
         targetSdkVersion safeExtGet("targetSdkVersion", 35)
-
-        externalNativeBuild {
-            cmake {
-                arguments "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON"
-            }
-        }
         ndk {
             abiFilters "arm64-v8a", "x86_64"
         }
@@ -63,22 +57,26 @@ dependencies {
     implementation project(':expo-modules-core')
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:${safeExtGet('kotlinVersion', '1.9.0')}"
 
-    // Mapbox Navigation SDK v3 core
+    // Mapbox Navigation SDK v3
     implementation "com.mapbox.navigationcore:android:${MAPBOX_NAV_VERSION}"
 
-    // Mapbox Maps SDK (pinned to minimum version)
+    // Mapbox Maps SDK
     implementation("com.mapbox.maps:android:${MAPBOX_MAPS_MIN_VERSION}") {
         transitive = true
     }
 
-    // ── Navigation UI Components (Waze-style UI) ─────────────────────────────
-    // MapboxManeuverView — turn-by-turn banner
+    // Navigation UI Components (ManeuverView, SpeedInfoView)
     implementation "com.mapbox.navigationcore:ui-components:${MAPBOX_NAV_VERSION}"
-    // MapboxSpeedInfoView — speed limit + current speed
+
+    // TripData (ManeuverApi, SpeedInfoApi, TripProgressApi)
     implementation "com.mapbox.navigationcore:tripdata:${MAPBOX_NAV_VERSION}"
-    // Trip progress API — ETA, distance, duration
+
+    // UI Maps (NavigationStyles, NavigationLocationProvider, NavigationCamera)
     implementation "com.mapbox.navigationcore:ui-maps:${MAPBOX_NAV_VERSION}"
 
+    // ConstraintLayout — required because MapboxManeuverView extends ConstraintLayout
+    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
+
     // AndroidX
     implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.7.0'
     implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0'

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

@@ -3,20 +3,19 @@ package expo.modules.mapboxnavigation
 import android.annotation.SuppressLint
 import android.content.Context
 import android.graphics.Color
-import android.os.Build
 import android.util.Log
 import android.view.Gravity
 import android.view.View
 import android.widget.FrameLayout
 import android.widget.LinearLayout
 import android.widget.TextView
-import androidx.core.content.ContextCompat
 import com.mapbox.api.directions.v5.models.RouteOptions
+import com.mapbox.common.location.Location
 import com.mapbox.geojson.Point
 import com.mapbox.maps.MapView
-import com.mapbox.maps.Style
 import com.mapbox.maps.plugin.animation.camera
 import com.mapbox.maps.plugin.locationcomponent.location
+import com.mapbox.navigation.base.TimeFormat
 import com.mapbox.navigation.base.extensions.applyDefaultNavigationOptions
 import com.mapbox.navigation.base.formatter.DistanceFormatterOptions
 import com.mapbox.navigation.base.options.NavigationOptions
@@ -28,6 +27,7 @@ import com.mapbox.navigation.core.MapboxNavigation
 import com.mapbox.navigation.core.MapboxNavigationProvider
 import com.mapbox.navigation.core.directions.session.RoutesObserver
 import com.mapbox.navigation.core.directions.session.RoutesUpdatedResult
+import com.mapbox.navigation.core.formatter.MapboxDistanceFormatter
 import com.mapbox.navigation.core.trip.session.LocationMatcherResult
 import com.mapbox.navigation.core.trip.session.LocationObserver
 import com.mapbox.navigation.core.trip.session.RouteProgressObserver
@@ -47,6 +47,9 @@ import com.mapbox.navigation.ui.maps.camera.NavigationCamera
 import com.mapbox.navigation.ui.maps.camera.data.MapboxNavigationViewportDataSource
 import com.mapbox.navigation.ui.maps.camera.transition.NavigationCameraTransitionOptions
 import com.mapbox.navigation.ui.maps.location.NavigationLocationProvider
+import com.mapbox.navigation.ui.maps.route.arrow.api.MapboxRouteArrowApi
+import com.mapbox.navigation.ui.maps.route.arrow.api.MapboxRouteArrowView
+import com.mapbox.navigation.ui.maps.route.arrow.model.RouteArrowOptions
 import com.mapbox.navigation.ui.maps.route.line.api.MapboxRouteLineApi
 import com.mapbox.navigation.ui.maps.route.line.api.MapboxRouteLineView
 import com.mapbox.navigation.ui.maps.route.line.model.MapboxRouteLineApiOptions
@@ -55,6 +58,7 @@ import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
 import java.util.Calendar
+import java.util.Date
 import java.util.Locale
 
 private const val TAG = "ExpoMapboxNavigation"
@@ -70,31 +74,28 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private val onRoutesFailed by EventDispatcher()
     private val onArrival by EventDispatcher()
 
-    // ── Core views ────────────────────────────────────────────────────────────
+    // ── Views ─────────────────────────────────────────────────────────────────
     private val mapView: MapView = MapView(context)
-
-    // ── Overlay UI views (Waze-style) ─────────────────────────────────────────
-    private lateinit var maneuverView: MapboxManeuverView
-    private lateinit var speedInfoView: MapboxSpeedInfoView
-    private lateinit var tripProgressView: MapboxTripProgressView
-    private lateinit var etaBottomBar: LinearLayout
-    private lateinit var tvEtaTime: TextView
-    private lateinit var tvDuration: TextView
-    private lateinit var tvDistance: TextView
-    private lateinit var btnCancel: TextView
+    private var maneuverView: MapboxManeuverView? = null
+    private var speedInfoView: MapboxSpeedInfoView? = null
+    private var tripProgressView: MapboxTripProgressView? = null
+    private var tvEtaTime: TextView? = null
+    private var tvDuration: TextView? = null
+    private var tvDistance: TextView? = null
+    private var etaBar: LinearLayout? = null
 
     // ── Navigation APIs ───────────────────────────────────────────────────────
-    private var navigationCamera: NavigationCamera? = null
-    private var viewportDataSource: MapboxNavigationViewportDataSource? = null
-    private var routeLineApi: MapboxRouteLineApi? = null
-    private var routeLineView: MapboxRouteLineView? = null
-    private var mapboxNavigation: MapboxNavigation? = null
-    private var maneuverApi: MapboxManeuverApi? = null
-    private var speedInfoApi: MapboxSpeedInfoApi? = null
-    private var tripProgressApi: MapboxTripProgressApi? = null
+    private lateinit var navigationCamera: NavigationCamera
+    private lateinit var viewportDataSource: MapboxNavigationViewportDataSource
+    private lateinit var routeLineApi: MapboxRouteLineApi
+    private lateinit var routeLineView: MapboxRouteLineView
+    private lateinit var maneuverApi: MapboxManeuverApi
+    private lateinit var tripProgressApi: MapboxTripProgressApi
+    private lateinit var speedInfoApi: MapboxSpeedInfoApi
+    private val routeArrowApi = MapboxRouteArrowApi()
+    private lateinit var routeArrowView: MapboxRouteArrowView
     private val navigationLocationProvider = NavigationLocationProvider()
-
-    // ── Night mode state ──────────────────────────────────────────────────────
+    private var mapboxNavigation: MapboxNavigation? = null
     private var isNightMode = false
 
     // ── Props ─────────────────────────────────────────────────────────────────
@@ -113,134 +114,123 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private var customRasterAboveLayerId: String? = null
 
     init {
-        buildOverlayUI()
+        buildUI()
+        initAPIs()
         setupNavigation()
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Build the Waze-style overlay UI programmatically
+    // Build UI
     // ─────────────────────────────────────────────────────────────────────────
-    private fun buildOverlayUI() {
+    private fun buildUI() {
+        val dp = context.resources.displayMetrics.density
         val root = FrameLayout(context).apply {
             layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
         }
 
-        // MapView full screen
-        mapView.layoutParams = FrameLayout.LayoutParams(
+        root.addView(mapView, FrameLayout.LayoutParams(
             FrameLayout.LayoutParams.MATCH_PARENT,
             FrameLayout.LayoutParams.MATCH_PARENT
-        )
-        root.addView(mapView)
+        ))
 
-        val dp = context.resources.displayMetrics.density
+        // ManeuverView — top (cast to View: extends ConstraintLayout)
+        val mv = MapboxManeuverView(context)
+        root.addView(mv as View, FrameLayout.LayoutParams(
+            FrameLayout.LayoutParams.MATCH_PARENT,
+            FrameLayout.LayoutParams.WRAP_CONTENT
+        ).also { it.gravity = Gravity.TOP })
+        mv.visibility = View.INVISIBLE
+        maneuverView = mv
+
+        // SpeedInfoView — bottom-left (cast to View)
+        val siv = MapboxSpeedInfoView(context)
+        root.addView(siv as View, FrameLayout.LayoutParams(
+            FrameLayout.LayoutParams.WRAP_CONTENT,
+            FrameLayout.LayoutParams.WRAP_CONTENT
+        ).also {
+            it.gravity = Gravity.BOTTOM or Gravity.START
+            it.setMargins((16 * dp).toInt(), 0, 0, (100 * dp).toInt())
+        })
+        siv.visibility = View.GONE
+        speedInfoView = siv
 
-        // ── Maneuver banner (top) ─────────────────────────────────────────────
-        maneuverView = MapboxManeuverView(context).apply {
-            layoutParams = FrameLayout.LayoutParams(
-                FrameLayout.LayoutParams.MATCH_PARENT,
-                FrameLayout.LayoutParams.WRAP_CONTENT
-            ).also { it.gravity = Gravity.TOP }
-            visibility = View.GONE
-        }
-        root.addView(maneuverView)
-
-        // ── Speed info (bottom-left, Waze style) ──────────────────────────────
-        speedInfoView = MapboxSpeedInfoView(context).apply {
-            layoutParams = FrameLayout.LayoutParams(
-                FrameLayout.LayoutParams.WRAP_CONTENT,
-                FrameLayout.LayoutParams.WRAP_CONTENT
-            ).also {
-                it.gravity = Gravity.BOTTOM or Gravity.START
-                it.setMargins(
-                    (16 * dp).toInt(), 0,
-                    0, (120 * dp).toInt()
-                )
-            }
-            visibility = View.GONE
-        }
-        root.addView(speedInfoView)
+        // TripProgressView (used by the official Mapbox render method)
+        val tpv = MapboxTripProgressView(context)
+        tripProgressView = tpv
 
-        // ── ETA bottom bar ────────────────────────────────────────────────────
-        etaBottomBar = LinearLayout(context).apply {
+        // Bottom ETA bar
+        val bar = LinearLayout(context).apply {
             orientation = LinearLayout.HORIZONTAL
             setBackgroundColor(Color.WHITE)
             elevation = 8 * dp
-            layoutParams = FrameLayout.LayoutParams(
-                FrameLayout.LayoutParams.MATCH_PARENT,
-                (80 * dp).toInt()
-            ).also { it.gravity = Gravity.BOTTOM }
+            visibility = View.INVISIBLE
             gravity = Gravity.CENTER_VERTICAL
             setPadding(
                 (16 * dp).toInt(), (8 * dp).toInt(),
                 (16 * dp).toInt(), (8 * dp).toInt()
             )
-            visibility = View.GONE
         }
+        root.addView(bar, FrameLayout.LayoutParams(
+            FrameLayout.LayoutParams.MATCH_PARENT, (80 * dp).toInt()
+        ).also { it.gravity = Gravity.BOTTOM })
 
-        // ETA time
-        tvEtaTime = TextView(context).apply {
+        val etaTime = TextView(context).apply {
             textSize = 22f
             setTextColor(Color.BLACK)
             typeface = android.graphics.Typeface.DEFAULT_BOLD
-            layoutParams = LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f)
         }
-        etaBottomBar.addView(tvEtaTime)
+        bar.addView(etaTime, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f))
+        tvEtaTime = etaTime
 
-        // Duration + Distance (center)
-        val centerLayout = LinearLayout(context).apply {
+        val center = LinearLayout(context).apply {
             orientation = LinearLayout.VERTICAL
             gravity = Gravity.CENTER
-            layoutParams = LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 2f)
         }
-        tvDuration = TextView(context).apply {
-            textSize = 16f
-            setTextColor(Color.DKGRAY)
-            gravity = Gravity.CENTER
+        val dur = TextView(context).apply {
+            textSize = 16f; setTextColor(Color.DKGRAY); gravity = Gravity.CENTER
         }
-        tvDistance = TextView(context).apply {
-            textSize = 13f
-            setTextColor(Color.GRAY)
-            gravity = Gravity.CENTER
+        val dist = TextView(context).apply {
+            textSize = 13f; setTextColor(Color.GRAY); gravity = Gravity.CENTER
         }
-        centerLayout.addView(tvDuration)
-        centerLayout.addView(tvDistance)
-        etaBottomBar.addView(centerLayout)
-
-        // Cancel button
-        btnCancel = TextView(context).apply {
-            text = "✕"
-            textSize = 22f
-            setTextColor(Color.DKGRAY)
+        center.addView(dur)
+        center.addView(dist)
+        bar.addView(center, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 2f))
+        tvDuration = dur
+        tvDistance = dist
+
+        val cancelBtn = TextView(context).apply {
+            text = "✕"; textSize = 22f; setTextColor(Color.DKGRAY)
             gravity = Gravity.END or Gravity.CENTER_VERTICAL
-            layoutParams = LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f)
             setOnClickListener { cancelNavigation() }
         }
-        etaBottomBar.addView(btnCancel)
-        root.addView(etaBottomBar)
+        bar.addView(cancelBtn, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f))
+        etaBar = bar
 
         addView(root)
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Setup Navigation
+    // Init APIs — confirmed from official Mapbox examples
     // ─────────────────────────────────────────────────────────────────────────
-    private fun setupNavigation() {
-        val navigationOptions = NavigationOptions.Builder(context).build()
-        mapboxNavigation = MapboxNavigationProvider.create(navigationOptions)
-
-        // Auto day/night style
-        val style = mapStyle ?: getAutoStyle()
-
-        mapView.mapboxMap.loadStyle(style) { _ ->
-            setupComponents()
-            registerObservers()
-        }
-    }
+    private fun initAPIs() {
+        val distanceFormatterOptions = DistanceFormatterOptions.Builder(context).build()
+
+        maneuverApi = MapboxManeuverApi(MapboxDistanceFormatter(distanceFormatterOptions))
+
+        // TripProgressApi — from ShowTripProgressActivity official example
+        // PercentDistanceTraveledFormatter is optional — omit if causing issues
+        tripProgressApi = MapboxTripProgressApi(
+            TripProgressUpdateFormatter.Builder(context)
+                .distanceRemainingFormatter(DistanceRemainingFormatter(distanceFormatterOptions))
+                .timeRemainingFormatter(TimeRemainingFormatter(context))
+                .estimatedTimeToArrivalFormatter(
+                    EstimatedTimeToArrivalFormatter(context, TimeFormat.NONE_SPECIFIED)
+                )
+                .build()
+        )
 
-    private fun setupComponents() {
-        val mapboxMap = mapView.mapboxMap
+        speedInfoApi = MapboxSpeedInfoApi()
 
-        // Route line
         routeLineApi = MapboxRouteLineApi(MapboxRouteLineApiOptions.Builder().build())
         routeLineView = MapboxRouteLineView(
             MapboxRouteLineViewOptions.Builder(context)
@@ -248,41 +238,38 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                 .build()
         )
 
-        // Camera
-        viewportDataSource = MapboxNavigationViewportDataSource(mapboxMap)
-        navigationCamera = NavigationCamera(
-            mapboxMap,
-            mapView.camera,
-            viewportDataSource!!
+        routeArrowView = MapboxRouteArrowView(RouteArrowOptions.Builder(context).build())
+    }
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // Setup Navigation
+    // ─────────────────────────────────────────────────────────────────────────
+    private fun setupNavigation() {
+        mapboxNavigation = MapboxNavigationProvider.create(
+            NavigationOptions.Builder(context).build()
         )
 
-        // Speed info API
-        speedInfoApi = MapboxSpeedInfoApi()
+        mapView.mapboxMap.loadStyle(mapStyle ?: getAutoStyle()) { style ->
+            routeLineView.initializeLayers(style)
 
-        // Maneuver API
-        val formatter = DistanceFormatterOptions.Builder(context).build()
-        maneuverApi = MapboxManeuverApi(
-            com.mapbox.navigation.base.formatter.MapboxDistanceFormatter(formatter)
-        )
+            viewportDataSource = MapboxNavigationViewportDataSource(mapView.mapboxMap)
+            navigationCamera = NavigationCamera(
+                mapView.mapboxMap,
+                mapView.camera,
+                viewportDataSource
+            )
+
+            mapView.location.apply {
+                setLocationProvider(navigationLocationProvider)
+                enabled = true
+            }
 
-        // Trip progress API
-        val progressFormatter = TripProgressUpdateFormatter.Builder(context)
-            .distanceRemainingFormatter(DistanceRemainingFormatter(formatter))
-            .timeRemainingFormatter(TimeRemainingFormatter(context))
-            .percentRouteTraveledFormatter(PercentDistanceTraveledFormatter())
-            .estimatedTimeToArrivalFormatter(EstimatedTimeToArrivalFormatter(context))
-            .build()
-        tripProgressApi = MapboxTripProgressApi(progressFormatter)
-
-        // Location puck
-        mapView.location.apply {
-            setLocationProvider(navigationLocationProvider)
-            enabled = true
+            registerObservers()
         }
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Register all observers
+    // Observers
     // ─────────────────────────────────────────────────────────────────────────
     private fun registerObservers() {
         val nav = mapboxNavigation ?: return
@@ -290,73 +277,76 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         // Routes observer
         nav.registerRoutesObserver(object : RoutesObserver {
             override fun onRoutesChanged(result: RoutesUpdatedResult) {
-                val routes = result.navigationRoutes
-                if (routes.isNotEmpty()) {
-                    routeLineApi?.setNavigationRoutes(routes) { value ->
-                        mapView.mapboxMap.style?.let { style ->
-                            routeLineView?.renderRouteDrawData(style, value)
+                if (result.navigationRoutes.isNotEmpty()) {
+                    routeLineApi.setNavigationRoutes(result.navigationRoutes) { value ->
+                        mapView.mapboxMap.style?.apply {
+                            routeLineView.renderRouteDrawData(this, value)
                         }
                     }
-                    viewportDataSource?.onRouteChanged(routes.first())
-                    viewportDataSource?.evaluate()
-                    safeCameraFollowing()
-
-                    // Show UI overlays
-                    maneuverView.visibility = View.VISIBLE
-                    etaBottomBar.visibility = View.VISIBLE
-
+                    viewportDataSource.onRouteChanged(result.navigationRoutes.first())
+                    viewportDataSource.evaluate()
+                    showUI()
                     onRoutesReady(mapOf(
-                        "routeCount" to routes.size,
-                        "distanceMeters" to (routes.first().directionsRoute.distance() ?: 0.0),
-                        "durationSeconds" to (routes.first().directionsRoute.duration() ?: 0.0)
+                        "routeCount" to result.navigationRoutes.size,
+                        "distanceMeters" to (result.navigationRoutes.first().directionsRoute.distance() ?: 0.0),
+                        "durationSeconds" to (result.navigationRoutes.first().directionsRoute.duration() ?: 0.0)
                     ))
                 } else {
-                    routeLineApi?.clearRouteLine { value ->
-                        mapView.mapboxMap.style?.let { style ->
-                            routeLineView?.renderClearRouteLineValue(style, value)
+                    mapView.mapboxMap.style?.let { style ->
+                        routeLineApi.clearRouteLine { value ->
+                            routeLineView.renderClearRouteLineValue(style, value)
                         }
+                        routeArrowView.render(style, routeArrowApi.clearArrows())
                     }
-                    viewportDataSource?.clearRouteData()
-                    viewportDataSource?.evaluate()
-                    hideNavigationUI()
+                    viewportDataSource.clearRouteData()
+                    viewportDataSource.evaluate()
+                    hideUI()
                 }
             }
         })
 
-        // Route progress observer — maneuvers + ETA + speed limit
+        // Route progress observer
         nav.registerRouteProgressObserver(RouteProgressObserver { routeProgress ->
-            viewportDataSource?.onRouteProgressChanged(routeProgress)
-            viewportDataSource?.evaluate()
+            viewportDataSource.onRouteProgressChanged(routeProgress)
+            viewportDataSource.evaluate()
 
-            // ── Maneuver instructions ──────────────────────────────────────
-            maneuverApi?.getManeuvers(routeProgress) { maneuverState ->
-                maneuverView.renderManeuvers(maneuverState)
+            // Route arrow
+            mapView.mapboxMap.style?.let { style ->
+                val arrowResult = routeArrowApi.addUpcomingManeuverArrow(routeProgress)
+                routeArrowView.renderManeuverUpdate(style, arrowResult)
             }
 
-            // ── Trip progress (ETA, duration, distance) ────────────────────
-            tripProgressApi?.getTripProgress(routeProgress)?.let { tripProgress ->
-                val eta = tripProgress.currentLegTimeRemaining
-                val cal = Calendar.getInstance().apply {
-                    add(Calendar.SECOND, eta.toInt())
+            // ── Maneuver — fold() with explicit Unit returns on both branches ──
+            // Fix for error: "Argument type mismatch: Unit? but R & Any expected"
+            // Solution: use explicit return type annotation on the success lambda
+            val maneuvers = maneuverApi.getManeuvers(routeProgress)
+            maneuvers.fold(
+                { error ->
+                    Log.w(TAG, "Maneuver error: ${error.errorMessage}")
+                    Unit
+                },
+                { _ ->
+                    maneuverView?.visibility = View.VISIBLE
+                    maneuverView?.renderManeuvers(maneuvers)
+                    Unit
                 }
-                val h = cal.get(Calendar.HOUR_OF_DAY)
-                val m = cal.get(Calendar.MINUTE)
-                tvEtaTime.text = String.format("%02d:%02d", h, m)
-
-                val totalMin = (tripProgress.totalTimeRemaining / 60).toInt()
-                tvDuration.text = if (totalMin >= 60)
-                    "${totalMin / 60}h ${totalMin % 60}min"
-                else
-                    "${totalMin} min"
-
-                val distKm = tripProgress.distanceRemaining / 1000.0
-                tvDistance.text = if (distKm >= 1.0)
-                    String.format("%.1f km", distKm)
-                else
-                    "${tripProgress.distanceRemaining.toInt()} m"
-            }
+            )
+
+            // ── Trip progress — use getTripProgress exactly as official example ──
+            // render() to the MapboxTripProgressView (official pattern)
+            // For our custom ETA bar, use the raw fields from TripProgressUpdateValue:
+            //   .estimatedTimeToArrival — Long (Unix timestamp ms of arrival)
+            //   .currentLegTimeRemaining — Double (seconds remaining for current leg)
+            //   .totalTimeRemaining — Double (seconds remaining total)
+            //   .distanceRemaining — Double (metres remaining)
+            val tripProgress = tripProgressApi.getTripProgress(routeProgress)
+            tripProgressView?.render(tripProgress)
+            updateEtaBar(
+                tripProgress.estimatedTimeToArrival,
+                tripProgress.totalTimeRemaining,
+                tripProgress.distanceRemaining
+            )
 
-            // ── Emit progress event ───────────────────────────────────────
             onRouteProgressChanged(mapOf(
                 "distanceRemaining" to routeProgress.distanceRemaining,
                 "durationRemaining" to routeProgress.durationRemaining,
@@ -368,124 +358,133 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             ))
         })
 
-        // Location observer — speed limit + location puck
+        // Location observer
         nav.registerLocationObserver(object : LocationObserver {
-            override fun onNewRawLocation(rawLocation: com.mapbox.common.location.Location) {}
-
-            override fun onNewLocationMatcherResult(locationMatcherResult: LocationMatcherResult) {
-                val enhancedLocation = locationMatcherResult.enhancedLocation
-
-                // Update location puck
+            override fun onNewRawLocation(rawLocation: Location) {}
+            override fun onNewLocationMatcherResult(result: LocationMatcherResult) {
+                val loc = result.enhancedLocation
                 navigationLocationProvider.changePosition(
-                    location = enhancedLocation,
-                    keyPoints = locationMatcherResult.keyPoints,
-                )
-
-                // Update camera
-                viewportDataSource?.onLocationChanged(enhancedLocation)
-                viewportDataSource?.evaluate()
-
-                // ── Speed limit (issue — show posted + current speed) ──────
-                val formatter = DistanceFormatterOptions.Builder(context).build()
-                val info = speedInfoApi?.updatePostedAndCurrentSpeed(
-                    locationMatcherResult,
-                    formatter
+                    location = loc,
+                    keyPoints = result.keyPoints,
                 )
-                if (info != null) {
-                    speedInfoView.visibility = View.VISIBLE
-                    speedInfoView.render(info)
+                viewportDataSource.onLocationChanged(loc)
+                viewportDataSource.evaluate()
+
+                // Speed limit
+                val fmtOptions = DistanceFormatterOptions.Builder(context).build()
+                val speedInfo = speedInfoApi.updatePostedAndCurrentSpeed(result, fmtOptions)
+                if (speedInfo != null) {
+                    speedInfoView?.visibility = View.VISIBLE
+                    speedInfoView?.render(speedInfo)
                 } else {
-                    speedInfoView.visibility = View.GONE
+                    speedInfoView?.visibility = View.GONE
                 }
 
-                // ── Auto day/night switch ──────────────────────────────────
                 checkAndSwitchDayNight()
             }
         })
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Auto day/night mode
+    // ETA bar — using confirmed TripProgressUpdateValue fields
+    // estimatedTimeToArrival: Long — Unix timestamp (ms) of expected arrival
+    // totalTimeRemaining: Double — seconds remaining
+    // distanceRemaining: Double — metres remaining
+    // ─────────────────────────────────────────────────────────────────────────
+    private fun updateEtaBar(
+        estimatedTimeToArrivalMs: Long,
+        totalTimeRemainingSec: Double,
+        distanceRemainingMetres: Double
+    ) {
+        // Arrival clock time from Unix timestamp
+        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 = (totalTimeRemainingSec / 60).toInt()
+        tvDuration?.text = if (totalMin >= 60)
+            "${totalMin / 60}h ${totalMin % 60}min"
+        else
+            "${totalMin} min"
+
+        // Distance remaining
+        tvDistance?.text = if (distanceRemainingMetres >= 1000)
+            String.format("%.1f km", distanceRemainingMetres / 1000.0)
+        else
+            "${distanceRemainingMetres.toInt()} m"
+    }
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // Day / Night
     // ─────────────────────────────────────────────────────────────────────────
     private fun getAutoStyle(): String {
         val hour = Calendar.getInstance().get(Calendar.HOUR_OF_DAY)
-        return if (hour in 6..20)
-            NavigationStyles.NAVIGATION_DAY_STYLE
-        else
-            NavigationStyles.NAVIGATION_NIGHT_STYLE
+        return if (hour in 6..20) NavigationStyles.NAVIGATION_DAY_STYLE
+        else NavigationStyles.NAVIGATION_NIGHT_STYLE
     }
 
     private fun checkAndSwitchDayNight() {
         val hour = Calendar.getInstance().get(Calendar.HOUR_OF_DAY)
         val shouldBeNight = hour !in 6..20
-        if (shouldBeNight != isNightMode) {
-            isNightMode = shouldBeNight
-            val newStyle = if (shouldBeNight)
-                NavigationStyles.NAVIGATION_NIGHT_STYLE
-            else
-                NavigationStyles.NAVIGATION_DAY_STYLE
-
-            mapView.mapboxMap.loadStyle(newStyle) { _ ->
-                // Re-render route line on new style
-                mapView.mapboxMap.style?.let { style ->
-                    routeLineApi?.let { api ->
-                        mapboxNavigation?.getNavigationRoutes()?.let { routes ->
-                            if (routes.isNotEmpty()) {
-                                api.setNavigationRoutes(routes) { value ->
-                                    routeLineView?.renderRouteDrawData(style, value)
-                                }
-                            }
-                        }
-                    }
+        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 ->
+                routeLineApi.setNavigationRoutes(routes) { value ->
+                    routeLineView.renderRouteDrawData(style, value)
                 }
             }
-
-            // Switch bottom bar color
-            etaBottomBar.setBackgroundColor(
-                if (shouldBeNight) Color.parseColor("#1E2433") else Color.WHITE
-            )
-            val textColor = if (shouldBeNight) Color.WHITE else Color.BLACK
-            tvEtaTime.setTextColor(textColor)
-            tvDuration.setTextColor(if (shouldBeNight) Color.LTGRAY else Color.DKGRAY)
-            tvDistance.setTextColor(if (shouldBeNight) Color.GRAY else Color.GRAY)
-            btnCancel.setTextColor(if (shouldBeNight) Color.LTGRAY else Color.DKGRAY)
         }
+        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)
     }
 
     // ─────────────────────────────────────────────────────────────────────────
     // Cancel navigation
     // ─────────────────────────────────────────────────────────────────────────
     private fun cancelNavigation() {
-        mapboxNavigation?.setNavigationRoutes(emptyList())
+        mapboxNavigation?.setNavigationRoutes(listOf())
         mapboxNavigation?.stopTripSession()
-        hideNavigationUI()
+        hideUI()
         onNavigationCancelled(mapOf<String, Any>())
     }
 
-    private fun hideNavigationUI() {
-        maneuverView.visibility = View.GONE
-        speedInfoView.visibility = View.GONE
-        etaBottomBar.visibility = View.GONE
+    private fun showUI() {
+        maneuverView?.visibility = View.VISIBLE
+        etaBar?.visibility = View.VISIBLE
     }
 
-    // ─────────────────────────────────────────────────────────────────────────
-    // Issue #43: safe camera
-    // ─────────────────────────────────────────────────────────────────────────
+    private fun hideUI() {
+        maneuverView?.visibility = View.INVISIBLE
+        speedInfoView?.visibility = View.GONE
+        etaBar?.visibility = View.INVISIBLE
+    }
+
+    // Issue #43
     private fun safeCameraFollowing() {
         try {
-            navigationCamera?.requestNavigationCameraToFollowing(
+            navigationCamera.requestNavigationCameraToFollowing(
                 stateTransitionOptions = NavigationCameraTransitionOptions.Builder()
-                    .maxDuration(0)
-                    .build()
+                    .maxDuration(0).build()
             )
         } catch (e: Exception) {
-            Log.e(TAG, "Camera transition error: ${e.message}")
+            Log.e(TAG, "Camera error: ${e.message}")
         }
     }
 
-    // ─────────────────────────────────────────────────────────────────────────
-    // Issue #31: voice units
-    // ─────────────────────────────────────────────────────────────────────────
+    // Issue #31
     private fun resolveVoiceUnits(): String {
         return when (voiceUnits?.lowercase()) {
             "metric" -> "metric"
@@ -497,76 +496,44 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         }
     }
 
-    // ─────────────────────────────────────────────────────────────────────────
     // 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()
-
         val builder = RouteOptions.builder()
             .applyDefaultNavigationOptions()
             .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(","))
-        }
+        navigationProfile?.let { builder.profile(if (it.startsWith("mapbox/")) it else "mapbox/$it") }
+        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()
-                }
-
-                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 onCanceled(
-                    routeOptions: RouteOptions,
-                    @RouterOrigin routerOrigin: String
-                ) {
-                    Log.d(TAG, "Route request cancelled")
-                }
+        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()
             }
-        )
+            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 cancelled")
+            }
+        })
     }
 
-    // ── Prop setters ──────────────────────────────────────────────────────────
-    fun setCoordinates(coords: List<Map<String, Double>>) {
-        coordinates = coords
-        if (coords.size >= 2) fetchRoutes()
-    }
+    // Prop setters
+    fun setCoordinates(coords: List<Map<String, Double>>) { 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 }
@@ -580,12 +547,11 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     fun setCustomRasterTileUrl(url: String?) { customRasterTileUrl = url }
     fun setCustomRasterAboveLayerId(layerId: String?) { customRasterAboveLayerId = layerId }
 
-    // ── Lifecycle ─────────────────────────────────────────────────────────────
     override fun onDetachedFromWindow() {
         super.onDetachedFromWindow()
-        maneuverApi?.cancel()
-        routeLineApi?.cancel()
-        routeLineView?.cancel()
+        maneuverApi.cancel()
+        routeLineApi.cancel()
+        routeLineView.cancel()
         mapboxNavigation?.stopTripSession()
         MapboxNavigationProvider.destroy()
         mapView.onStop()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jacques_gordon/expo-mapbox-navigation",
-  "version": "2.0.9",
+  "version": "2.1.1",
   "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",
@@ -23,14 +23,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/jacques_gordon/expo-mapbox-navigation.git"
+    "url": "https://github.com/jacquesngomeheffa/expo-mapbox-navigation.git"
   },
   "bugs": {
-    "url": "https://github.com/jacques_gordon/expo-mapbox-navigation/issues"
+    "url": "https://github.com/jacquesngomeheffa/expo-mapbox-navigation/issues"
   },
   "author": "Jacques Gordon",
   "license": "MIT",
-  "homepage": "https://github.com/jacques_gordon/expo-mapbox-navigation#readme",
+  "homepage": "https://github.com/jacquesngomeheffa/expo-mapbox-navigation#readme",
   "peerDependencies": {
     "expo": ">=53.0.0",
     "react": "*",