@jacques_gordon/expo-mapbox-navigation 2.0.9 → 2.1.0

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
@@ -62,7 +65,7 @@ private const val TAG = "ExpoMapboxNavigation"
 class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     ExpoView(context, appContext) {
 
-    // ── EventDispatchers ──────────────────────────────────────────────────────
+    // ── EventDispatchers (correct Expo Modules API for View events) ───────────
     private val onRouteProgressChanged by EventDispatcher()
     private val onRoutesReady by EventDispatcher()
     private val onNavigationFinished by EventDispatcher()
@@ -70,31 +73,30 @@ 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
-
-    // ── 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 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 (from official TurnByTurnExperienceActivity) ──────────
+    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()
+    private var mapboxNavigation: MapboxNavigation? = null
 
-    // ── Night mode state ──────────────────────────────────────────────────────
+    // ── Night mode ────────────────────────────────────────────────────────────
     private var isNightMode = false
 
     // ── Props ─────────────────────────────────────────────────────────────────
@@ -113,250 +115,250 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private var customRasterAboveLayerId: String? = null
 
     init {
-        buildOverlayUI()
+        buildUI()
+        initAPIs()
         setupNavigation()
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Build the Waze-style overlay UI programmatically
+    // 1. Build programmatic 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(
+        // Full-screen MapView
+        root.addView(mapView, FrameLayout.LayoutParams(
             FrameLayout.LayoutParams.MATCH_PARENT,
             FrameLayout.LayoutParams.MATCH_PARENT
-        )
-        root.addView(mapView)
-
-        val dp = context.resources.displayMetrics.density
-
-        // ── 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)
+        ))
 
-        // ── ETA bottom bar ────────────────────────────────────────────────────
-        etaBottomBar = LinearLayout(context).apply {
+        // ManeuverView — top banner
+        // NOTE: MapboxManeuverView extends ConstraintLayout, cast to View for addView()
+        val mv = MapboxManeuverView(context)
+        val mvParams = 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)
+        maneuverView = mv
+
+        // SpeedInfoView — bottom-left
+        val siv = MapboxSpeedInfoView(context)
+        val sivParams = 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())
+        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
+        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
         }
+        val barParams = FrameLayout.LayoutParams(
+            FrameLayout.LayoutParams.MATCH_PARENT,
+            (80 * dp).toInt()
+        )
+        barParams.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
         }
-        tvDistance = 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 {
+        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 }
+        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
+        root.addView(bar, barParams)
 
         addView(root)
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Setup Navigation
+    // 2. Init APIs (from official example — exact same pattern)
     // ─────────────────────────────────────────────────────────────────────────
-    private fun setupNavigation() {
-        val navigationOptions = NavigationOptions.Builder(context).build()
-        mapboxNavigation = MapboxNavigationProvider.create(navigationOptions)
+    private fun initAPIs() {
+        val distanceFormatterOptions = DistanceFormatterOptions.Builder(context).build()
 
-        // Auto day/night style
-        val style = mapStyle ?: getAutoStyle()
+        // EXACT same instantiation as TurnByTurnExperienceActivity
+        maneuverApi = MapboxManeuverApi(
+            MapboxDistanceFormatter(distanceFormatterOptions)
+        )
 
-        mapView.mapboxMap.loadStyle(style) { _ ->
-            setupComponents()
-            registerObservers()
-        }
-    }
+        tripProgressApi = MapboxTripProgressApi(
+            TripProgressUpdateFormatter.Builder(context)
+                .distanceRemainingFormatter(DistanceRemainingFormatter(distanceFormatterOptions))
+                .timeRemainingFormatter(TimeRemainingFormatter(context))
+                .percentRouteTraveledFormatter(PercentDistanceTraveledFormatter())
+                .estimatedTimeToArrivalFormatter(
+                    EstimatedTimeToArrivalFormatter(context, TimeFormat.NONE_SPECIFIED)
+                )
+                .build()
+        )
 
-    private fun setupComponents() {
-        val mapboxMap = mapView.mapboxMap
+        speedInfoApi = MapboxSpeedInfoApi()
 
-        // Route line
+        val routeLineViewOptions = MapboxRouteLineViewOptions.Builder(context)
+            .routeLineBelowLayerId("road-label-navigation")
+            .build()
         routeLineApi = MapboxRouteLineApi(MapboxRouteLineApiOptions.Builder().build())
-        routeLineView = MapboxRouteLineView(
-            MapboxRouteLineViewOptions.Builder(context)
-                .routeLineBelowLayerId("road-label-navigation")
-                .build()
-        )
+        routeLineView = MapboxRouteLineView(routeLineViewOptions)
+
+        val routeArrowOptions = RouteArrowOptions.Builder(context).build()
+        routeArrowView = MapboxRouteArrowView(routeArrowOptions)
+    }
 
-        // Camera
-        viewportDataSource = MapboxNavigationViewportDataSource(mapboxMap)
-        navigationCamera = NavigationCamera(
-            mapboxMap,
-            mapView.camera,
-            viewportDataSource!!
+    // ─────────────────────────────────────────────────────────────────────────
+    // 3. Setup Navigation
+    // ─────────────────────────────────────────────────────────────────────────
+    private fun setupNavigation() {
+        mapboxNavigation = MapboxNavigationProvider.create(
+            NavigationOptions.Builder(context).build()
         )
 
-        // Speed info API
-        speedInfoApi = MapboxSpeedInfoApi()
+        val style = mapStyle ?: getAutoStyle()
+        mapView.mapboxMap.loadStyle(style) { mapStyle ->
 
-        // Maneuver API
-        val formatter = DistanceFormatterOptions.Builder(context).build()
-        maneuverApi = MapboxManeuverApi(
-            com.mapbox.navigation.base.formatter.MapboxDistanceFormatter(formatter)
-        )
+            // Route line layers must be initialized first
+            routeLineView.initializeLayers(mapStyle)
 
-        // Trip progress API
-        val progressFormatter = TripProgressUpdateFormatter.Builder(context)
-            .distanceRemainingFormatter(DistanceRemainingFormatter(formatter))
-            .timeRemainingFormatter(TimeRemainingFormatter(context))
-            .percentRouteTraveledFormatter(PercentDistanceTraveledFormatter())
-            .estimatedTimeToArrivalFormatter(EstimatedTimeToArrivalFormatter(context))
-            .build()
-        tripProgressApi = MapboxTripProgressApi(progressFormatter)
+            // Camera setup — EXACT same as official example
+            viewportDataSource = MapboxNavigationViewportDataSource(mapView.mapboxMap)
+            navigationCamera = NavigationCamera(
+                mapView.mapboxMap,
+                mapView.camera,
+                viewportDataSource
+            )
+
+            // Location puck
+            mapView.location.apply {
+                setLocationProvider(navigationLocationProvider)
+                enabled = true
+            }
 
-        // Location puck
-        mapView.location.apply {
-            setLocationProvider(navigationLocationProvider)
-            enabled = true
+            registerObservers()
         }
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Register all observers
+    // 4. Observers — based 100% on official TurnByTurnExperienceActivity
     // ─────────────────────────────────────────────────────────────────────────
     private fun registerObservers() {
         val nav = mapboxNavigation ?: return
 
-        // Routes observer
+        // ── 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()) {
+                    // Draw route line
+                    routeLineApi.setNavigationRoutes(result.navigationRoutes) { value ->
+                        mapView.mapboxMap.style?.apply {
+                            routeLineView.renderRouteDrawData(this, value)
                         }
                     }
-                    viewportDataSource?.onRouteChanged(routes.first())
-                    viewportDataSource?.evaluate()
-                    safeCameraFollowing()
+                    // Update camera viewport
+                    viewportDataSource.onRouteChanged(result.navigationRoutes.first())
+                    viewportDataSource.evaluate()
 
-                    // Show UI overlays
-                    maneuverView.visibility = View.VISIBLE
-                    etaBottomBar.visibility = View.VISIBLE
+                    // Show navigation UI
+                    maneuverView?.visibility = View.VISIBLE
+                    etaBar?.visibility = View.VISIBLE
 
                     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)
+                    // Clear route line
+                    val style = mapView.mapboxMap.style
+                    if (style != null) {
+                        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 ───────────────────────────────────────────
+        // EXACT same pattern as TurnByTurnExperienceActivity.routeProgressObserver
         nav.registerRouteProgressObserver(RouteProgressObserver { routeProgress ->
-            viewportDataSource?.onRouteProgressChanged(routeProgress)
-            viewportDataSource?.evaluate()
-
-            // ── Maneuver instructions ──────────────────────────────────────
-            maneuverApi?.getManeuvers(routeProgress) { maneuverState ->
-                maneuverView.renderManeuvers(maneuverState)
+            // Update camera
+            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)
             }
 
-            // ── 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 banner — EXACT same fold() pattern as official example
+            val maneuvers = maneuverApi.getManeuvers(routeProgress)
+            maneuvers.fold(
+                { error -> Log.w(TAG, "Maneuver error: ${error.errorMessage}") },
+                {
+                    maneuverView?.visibility = View.VISIBLE
+                    maneuverView?.renderManeuvers(maneuvers)
                 }
-                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 — EXACT same as official example
+            // getTripProgress returns TripProgressUpdateValue directly (not nullable)
+            val tripProgress = tripProgressApi.getTripProgress(routeProgress)
+            tripProgressView?.render(tripProgress)
+
+            // Update our custom ETA bar from tripProgress fields
+            updateEtaBar(tripProgress)
 
-            // ── Emit progress event ───────────────────────────────────────
+            // Emit event
             onRouteProgressChanged(mapOf(
                 "distanceRemaining" to routeProgress.distanceRemaining,
                 "durationRemaining" to routeProgress.durationRemaining,
@@ -368,9 +370,10 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             ))
         })
 
-        // Location observer — speed limit + location puck
+        // ── Location observer ─────────────────────────────────────────────────
+        // EXACT same as official example
         nav.registerLocationObserver(object : LocationObserver {
-            override fun onNewRawLocation(rawLocation: com.mapbox.common.location.Location) {}
+            override fun onNewRawLocation(rawLocation: Location) {}
 
             override fun onNewLocationMatcherResult(locationMatcherResult: LocationMatcherResult) {
                 val enhancedLocation = locationMatcherResult.enhancedLocation
@@ -382,98 +385,117 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                 )
 
                 // Update camera
-                viewportDataSource?.onLocationChanged(enhancedLocation)
-                viewportDataSource?.evaluate()
+                viewportDataSource.onLocationChanged(enhancedLocation)
+                viewportDataSource.evaluate()
 
-                // ── Speed limit (issue — show posted + current speed) ──────
-                val formatter = DistanceFormatterOptions.Builder(context).build()
-                val info = speedInfoApi?.updatePostedAndCurrentSpeed(
+                // Speed limit display
+                val formatterOptions = DistanceFormatterOptions.Builder(context).build()
+                val speedInfo = speedInfoApi.updatePostedAndCurrentSpeed(
                     locationMatcherResult,
-                    formatter
+                    formatterOptions
                 )
-                if (info != null) {
-                    speedInfoView.visibility = View.VISIBLE
-                    speedInfoView.render(info)
+                if (speedInfo != null) {
+                    speedInfoView?.visibility = View.VISIBLE
+                    speedInfoView?.render(speedInfo)
                 } else {
-                    speedInfoView.visibility = View.GONE
+                    speedInfoView?.visibility = View.GONE
                 }
 
-                // ── Auto day/night switch ──────────────────────────────────
+                // Auto day/night switch
                 checkAndSwitchDayNight()
             }
         })
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Auto day/night mode
+    // 5. ETA bar update
+    // TripProgressUpdateValue fields confirmed from official tripdata API
+    // ─────────────────────────────────────────────────────────────────────────
+    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)
+        )
+
+        // Duration remaining
+        val totalMin = (tripProgress.totalTimeRemaining / 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)
+        else
+            "${distM.toInt()} m"
+    }
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // 6. Day / Night auto switch
     // ─────────────────────────────────────────────────────────────────────────
     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
+    // 7. 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 hideUI() {
+        maneuverView?.visibility = View.INVISIBLE
+        speedInfoView?.visibility = View.GONE
+        etaBar?.visibility = View.INVISIBLE
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Issue #43: safe camera
+    // 8. Issue #43 — safe camera following
     // ─────────────────────────────────────────────────────────────────────────
     private fun safeCameraFollowing() {
         try {
-            navigationCamera?.requestNavigationCameraToFollowing(
+            navigationCamera.requestNavigationCameraToFollowing(
                 stateTransitionOptions = NavigationCameraTransitionOptions.Builder()
                     .maxDuration(0)
                     .build()
@@ -484,7 +506,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Issue #31: voice units
+    // 9. Issue #31 — Voice units
     // ─────────────────────────────────────────────────────────────────────────
     private fun resolveVoiceUnits(): String {
         return when (voiceUnits?.lowercase()) {
@@ -498,7 +520,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Route request
+    // 10. Route request
     // ─────────────────────────────────────────────────────────────────────────
     @SuppressLint("MissingPermission")
     private fun fetchRoutes() {
@@ -515,16 +537,13 @@ 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) }
 
@@ -541,12 +560,10 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                     }
                     nav.setNavigationRoutes(routes)
                     nav.startTripSession()
+                    safeCameraFollowing()
                 }
 
-                override fun onFailure(
-                    reasons: List<RouterFailure>,
-                    routeOptions: RouteOptions
-                ) {
+                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))
@@ -583,9 +600,9 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     // ── 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.0",
   "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": "*",