@jacques_gordon/expo-mapbox-navigation 2.0.8 → 2.0.9

package/android/build.gradle

@@ -1,51 +1,25 @@
 apply plugin: 'com.android.library'
 apply plugin: 'kotlin-android'
-apply plugin: 'maven-publish'
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Mapbox Navigation SDK version used by this module.
-// Must be aligned with the Mapbox Maps SDK version used in @rnmapbox/maps.
-// Minimum required: 3.x compatible with mapbox-maps-android 11.11.0
-// ─────────────────────────────────────────────────────────────────────────────
-// Navigation SDK v3 uses com.mapbox.navigationcore (NOT com.mapbox.navigation)
-// v3.8.1 is the stable release that ships with Maps SDK 11.11.0
-def MAPBOX_NAVIGATION_VERSION = "3.8.1"
-
-// Forces minimum Mapbox Maps Android version to 11.11.0 to ensure
-// CameraAnimationsUtils.calculateCameraAnimationHint(...) is available (fixes #43)
+def MAPBOX_NAV_VERSION = "3.8.1"
 def MAPBOX_MAPS_MIN_VERSION = "11.11.0"
-
-// ─────────────────────────────────────────────────────────────────────────────
-// NDK 27 — required for 16 KB page size compatibility (Android 15+)
-// See: https://developer.android.com/guide/practices/page-sizes
-// NDK 27 added full support for 16 KB page alignment via -DALIGN_16KB flag
-// ─────────────────────────────────────────────────────────────────────────────
 def REQUIRED_NDK_VERSION = "27.0.12077973"
 
 android {
     compileSdkVersion safeExtGet("compileSdkVersion", 35)
     namespace "expo.modules.mapboxnavigation"
-
-    // Force NDK 27 for 16 KB page size compatibility
     ndkVersion REQUIRED_NDK_VERSION
 
     defaultConfig {
         minSdkVersion safeExtGet("minSdkVersion", 24)
         targetSdkVersion safeExtGet("targetSdkVersion", 35)
 
-        // ─────────────────────────────────────────────────────────────────
-        // 16 KB PAGE SIZE SUPPORT (Android 15 / API 35+)
-        // Required for Google Play compliance starting Feb 2025 (64-bit apps)
-        // This ensures native .so libraries are aligned to 16 KB boundaries.
-        // ─────────────────────────────────────────────────────────────────
         externalNativeBuild {
             cmake {
                 arguments "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON"
             }
         }
-
         ndk {
-            // Only build for 64-bit ABIs — 16 KB page size requirement is 64-bit only
             abiFilters "arm64-v8a", "x86_64"
         }
     }
@@ -60,8 +34,6 @@ android {
     }
 
     packagingOptions {
-        // Ensure .so files are NOT compressed — required for 16 KB page size support
-        // Compressed .so files cannot be aligned in the APK
         jniLibs {
             useLegacyPackaging = false
         }
@@ -75,13 +47,9 @@ android {
 repositories {
     mavenCentral()
     google()
-
-    // Mapbox Maven repository — requires a secret token (sk.*)
     maven {
         url 'https://api.mapbox.com/downloads/v2/releases/maven'
-        authentication {
-            basic(BasicAuthentication)
-        }
+        authentication { basic(BasicAuthentication) }
         credentials {
             username = 'mapbox'
             password = project.hasProperty('MAPBOX_DOWNLOADS_TOKEN')
@@ -95,22 +63,26 @@ dependencies {
     implementation project(':expo-modules-core')
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:${safeExtGet('kotlinVersion', '1.9.0')}"
 
-    // ─────────────────────────────────────────────────────────────────────────
-    // Mapbox Navigation SDK v3 for Android
-    // Group changed from com.mapbox.navigation to com.mapbox.navigationcore in v3
-    // v3.8.1 ships with mapbox-maps-android 11.11.0 (fixes issue #43)
-    // ─────────────────────────────────────────────────────────────────────────
-    implementation "com.mapbox.navigationcore:android:${MAPBOX_NAVIGATION_VERSION}"
+    // Mapbox Navigation SDK v3 core
+    implementation "com.mapbox.navigationcore:android:${MAPBOX_NAV_VERSION}"
 
-    // Explicitly pin Mapbox Maps SDK to ≥ 11.11.0 to guarantee method compatibility
-    // Prevents gradle from resolving an older transitive version (issue #43 root cause)
+    // Mapbox Maps SDK (pinned to minimum version)
     implementation("com.mapbox.maps:android:${MAPBOX_MAPS_MIN_VERSION}") {
         transitive = true
     }
 
-    // Lifecycle support
+    // ── Navigation UI Components (Waze-style UI) ─────────────────────────────
+    // MapboxManeuverView — turn-by-turn banner
+    implementation "com.mapbox.navigationcore:ui-components:${MAPBOX_NAV_VERSION}"
+    // MapboxSpeedInfoView — speed limit + current speed
+    implementation "com.mapbox.navigationcore:tripdata:${MAPBOX_NAV_VERSION}"
+    // Trip progress API — ETA, distance, duration
+    implementation "com.mapbox.navigationcore:ui-maps:${MAPBOX_NAV_VERSION}"
+
+    // AndroidX
     implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.7.0'
     implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0'
+    implementation 'androidx.core:core-ktx:1.13.1'
 }
 
 def safeExtGet(prop, fallback) {

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

@@ -2,13 +2,23 @@ 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.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.extensions.applyDefaultNavigationOptions
+import com.mapbox.navigation.base.formatter.DistanceFormatterOptions
 import com.mapbox.navigation.base.options.NavigationOptions
 import com.mapbox.navigation.base.route.NavigationRoute
 import com.mapbox.navigation.base.route.NavigationRouterCallback
@@ -18,10 +28,25 @@ 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.trip.session.LocationMatcherResult
+import com.mapbox.navigation.core.trip.session.LocationObserver
 import com.mapbox.navigation.core.trip.session.RouteProgressObserver
+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
+import com.mapbox.navigation.ui.components.maneuver.view.MapboxManeuverView
+import com.mapbox.navigation.ui.components.speedlimit.view.MapboxSpeedInfoView
+import com.mapbox.navigation.ui.components.tripprogress.view.MapboxTripProgressView
+import com.mapbox.navigation.ui.maps.NavigationStyles
 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.line.api.MapboxRouteLineApi
 import com.mapbox.navigation.ui.maps.route.line.api.MapboxRouteLineView
 import com.mapbox.navigation.ui.maps.route.line.model.MapboxRouteLineApiOptions
@@ -29,6 +54,7 @@ import com.mapbox.navigation.ui.maps.route.line.model.MapboxRouteLineViewOptions
 import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
+import java.util.Calendar
 import java.util.Locale
 
 private const val TAG = "ExpoMapboxNavigation"
@@ -36,8 +62,7 @@ private const val TAG = "ExpoMapboxNavigation"
 class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     ExpoView(context, appContext) {
 
-    // ── EventDispatchers — the correct Expo Modules API for View events ───────
-    // Each event declared here must match the Events(...) list in ExpoMapboxNavigationModule
+    // ── EventDispatchers ──────────────────────────────────────────────────────
     private val onRouteProgressChanged by EventDispatcher()
     private val onRoutesReady by EventDispatcher()
     private val onNavigationFinished by EventDispatcher()
@@ -45,13 +70,32 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private val onRoutesFailed by EventDispatcher()
     private val onArrival by EventDispatcher()
 
-    // ── Map & Navigation ──────────────────────────────────────────────────────
+    // ── Core 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 val navigationLocationProvider = NavigationLocationProvider()
+
+    // ── Night mode state ──────────────────────────────────────────────────────
+    private var isNightMode = false
 
     // ── Props ─────────────────────────────────────────────────────────────────
     private var coordinates: List<Map<String, Double>> = emptyList()
@@ -69,33 +113,181 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private var customRasterAboveLayerId: String? = null
 
     init {
-        mapView.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
-        addView(mapView)
+        buildOverlayUI()
         setupNavigation()
     }
 
+    // ─────────────────────────────────────────────────────────────────────────
+    // Build the Waze-style overlay UI programmatically
+    // ─────────────────────────────────────────────────────────────────────────
+    private fun buildOverlayUI() {
+        val root = FrameLayout(context).apply {
+            layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        }
+
+        // MapView full screen
+        mapView.layoutParams = 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 {
+            orientation = LinearLayout.HORIZONTAL
+            setBackgroundColor(Color.WHITE)
+            elevation = 8 * dp
+            layoutParams = FrameLayout.LayoutParams(
+                FrameLayout.LayoutParams.MATCH_PARENT,
+                (80 * dp).toInt()
+            ).also { it.gravity = Gravity.BOTTOM }
+            gravity = Gravity.CENTER_VERTICAL
+            setPadding(
+                (16 * dp).toInt(), (8 * dp).toInt(),
+                (16 * dp).toInt(), (8 * dp).toInt()
+            )
+            visibility = View.GONE
+        }
+
+        // ETA time
+        tvEtaTime = 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)
+
+        // Duration + Distance (center)
+        val centerLayout = 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 {
+            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)
+
+        addView(root)
+    }
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // Setup Navigation
+    // ─────────────────────────────────────────────────────────────────────────
     private fun setupNavigation() {
         val navigationOptions = NavigationOptions.Builder(context).build()
         mapboxNavigation = MapboxNavigationProvider.create(navigationOptions)
 
-        mapView.mapboxMap.loadStyle(mapStyle ?: Style.MAPBOX_STREETS) { _ ->
-            routeLineApi = MapboxRouteLineApi(MapboxRouteLineApiOptions.Builder().build())
-            routeLineView = MapboxRouteLineView(
-                MapboxRouteLineViewOptions.Builder(context).build()
-            )
-            viewportDataSource = MapboxNavigationViewportDataSource(mapView.mapboxMap)
-            navigationCamera = NavigationCamera(
-                mapView.mapboxMap,
-                mapView.camera,
-                viewportDataSource!!
-            )
+        // Auto day/night style
+        val style = mapStyle ?: getAutoStyle()
+
+        mapView.mapboxMap.loadStyle(style) { _ ->
+            setupComponents()
             registerObservers()
         }
     }
 
+    private fun setupComponents() {
+        val mapboxMap = mapView.mapboxMap
+
+        // Route line
+        routeLineApi = MapboxRouteLineApi(MapboxRouteLineApiOptions.Builder().build())
+        routeLineView = MapboxRouteLineView(
+            MapboxRouteLineViewOptions.Builder(context)
+                .routeLineBelowLayerId("road-label-navigation")
+                .build()
+        )
+
+        // Camera
+        viewportDataSource = MapboxNavigationViewportDataSource(mapboxMap)
+        navigationCamera = NavigationCamera(
+            mapboxMap,
+            mapView.camera,
+            viewportDataSource!!
+        )
+
+        // Speed info API
+        speedInfoApi = MapboxSpeedInfoApi()
+
+        // Maneuver API
+        val formatter = DistanceFormatterOptions.Builder(context).build()
+        maneuverApi = MapboxManeuverApi(
+            com.mapbox.navigation.base.formatter.MapboxDistanceFormatter(formatter)
+        )
+
+        // 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
+        }
+    }
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // Register all observers
+    // ─────────────────────────────────────────────────────────────────────────
     private fun registerObservers() {
         val nav = mapboxNavigation ?: return
 
+        // Routes observer
         nav.registerRoutesObserver(object : RoutesObserver {
             override fun onRoutesChanged(result: RoutesUpdatedResult) {
                 val routes = result.navigationRoutes
@@ -109,6 +301,10 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                     viewportDataSource?.evaluate()
                     safeCameraFollowing()
 
+                    // Show UI overlays
+                    maneuverView.visibility = View.VISIBLE
+                    etaBottomBar.visibility = View.VISIBLE
+
                     onRoutesReady(mapOf(
                         "routeCount" to routes.size,
                         "distanceMeters" to (routes.first().directionsRoute.distance() ?: 0.0),
@@ -122,14 +318,45 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                     }
                     viewportDataSource?.clearRouteData()
                     viewportDataSource?.evaluate()
+                    hideNavigationUI()
                 }
             }
         })
 
+        // Route progress observer — maneuvers + ETA + speed limit
         nav.registerRouteProgressObserver(RouteProgressObserver { routeProgress ->
             viewportDataSource?.onRouteProgressChanged(routeProgress)
             viewportDataSource?.evaluate()
 
+            // ── Maneuver instructions ──────────────────────────────────────
+            maneuverApi?.getManeuvers(routeProgress) { maneuverState ->
+                maneuverView.renderManeuvers(maneuverState)
+            }
+
+            // ── Trip progress (ETA, duration, distance) ────────────────────
+            tripProgressApi?.getTripProgress(routeProgress)?.let { tripProgress ->
+                val eta = tripProgress.currentLegTimeRemaining
+                val cal = Calendar.getInstance().apply {
+                    add(Calendar.SECOND, eta.toInt())
+                }
+                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"
+            }
+
+            // ── Emit progress event ───────────────────────────────────────
             onRouteProgressChanged(mapOf(
                 "distanceRemaining" to routeProgress.distanceRemaining,
                 "durationRemaining" to routeProgress.durationRemaining,
@@ -140,9 +367,110 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                         ?.currentStepProgress?.distanceRemaining ?: 0f)
             ))
         })
+
+        // Location observer — speed limit + location puck
+        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
+                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
+                )
+                if (info != null) {
+                    speedInfoView.visibility = View.VISIBLE
+                    speedInfoView.render(info)
+                } else {
+                    speedInfoView.visibility = View.GONE
+                }
+
+                // ── Auto day/night switch ──────────────────────────────────
+                checkAndSwitchDayNight()
+            }
+        })
+    }
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // Auto day/night mode
+    // ─────────────────────────────────────────────────────────────────────────
+    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
+    }
+
+    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)
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            // 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)
+        }
+    }
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // Cancel navigation
+    // ─────────────────────────────────────────────────────────────────────────
+    private fun cancelNavigation() {
+        mapboxNavigation?.setNavigationRoutes(emptyList())
+        mapboxNavigation?.stopTripSession()
+        hideNavigationUI()
+        onNavigationCancelled(mapOf<String, Any>())
+    }
+
+    private fun hideNavigationUI() {
+        maneuverView.visibility = View.GONE
+        speedInfoView.visibility = View.GONE
+        etaBottomBar.visibility = View.GONE
     }
 
-    // ── Issue #43: safe camera ────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────────────
+    // Issue #43: safe camera
+    // ─────────────────────────────────────────────────────────────────────────
     private fun safeCameraFollowing() {
         try {
             navigationCamera?.requestNavigationCameraToFollowing(
@@ -151,11 +479,13 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                     .build()
             )
         } catch (e: Exception) {
-            Log.e(TAG, "Camera transition error (issue #43): ${e.message}")
+            Log.e(TAG, "Camera transition error: ${e.message}")
         }
     }
 
-    // ── Issue #31: voice units ────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────────────
+    // Issue #31: voice units
+    // ─────────────────────────────────────────────────────────────────────────
     private fun resolveVoiceUnits(): String {
         return when (voiceUnits?.lowercase()) {
             "metric" -> "metric"
@@ -167,7 +497,9 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         }
     }
 
-    // ── Route request ─────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────────────
+    // Route request
+    // ─────────────────────────────────────────────────────────────────────────
     @SuppressLint("MissingPermission")
     private fun fetchRoutes() {
         val nav = mapboxNavigation ?: return
@@ -183,6 +515,8 @@ 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 {
@@ -249,6 +583,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     // ── Lifecycle ─────────────────────────────────────────────────────────────
     override fun onDetachedFromWindow() {
         super.onDetachedFromWindow()
+        maneuverApi?.cancel()
         routeLineApi?.cancel()
         routeLineView?.cancel()
         mapboxNavigation?.stopTripSession()

package/app.plugin.js

@@ -4,8 +4,6 @@ const path = require('path');
 
 const NDK_VERSION = '27.0.12077973';
 const MAPBOX_MAPS_MIN_VERSION = '11.11.0';
-// Navigation SDK v3 uses com.mapbox.navigationcore group
-const MAPBOX_NAV_VERSION = '3.8.1';
 
 const withMapboxNavigation = (config, options = {}) => {
   const {
@@ -22,13 +20,11 @@ const withMapboxNavigation = (config, options = {}) => {
     );
   }
 
-  // Validate mapboxMapsVersion >= 11.11.0
   const [major, minor] = mapboxMapsVersion.split('.').map(Number);
   if (major < 11 || (major === 11 && minor < 11)) {
     throw new Error(
       `[@jacques_gordon/expo-mapbox-navigation] mapboxMapsVersion must be >= 11.11.0.\n` +
-      `Provided: ${mapboxMapsVersion}\n` +
-      `This minimum version is required to fix the CameraAnimationsUtils crash (issue #43).`
+      `Provided: ${mapboxMapsVersion}`
     );
   }
 
@@ -36,7 +32,6 @@ const withMapboxNavigation = (config, options = {}) => {
   config = withProjectBuildGradle(config, (mod) => {
     let contents = mod.modResults.contents;
 
-    // Add Mapbox Maven repo if not already present
     if (!contents.includes('api.mapbox.com/downloads/v2/releases/maven')) {
       const mavenBlock = `
         maven {
@@ -49,7 +44,6 @@ const withMapboxNavigation = (config, options = {}) => {
                     : System.getenv('MAPBOX_DOWNLOADS_TOKEN') ?: ""
             }
         }`;
-
       if (contents.includes('allprojects') && contents.includes('repositories')) {
         contents = contents.replace(
           /allprojects\s*\{[\s\S]*?repositories\s*\{/,
@@ -58,7 +52,6 @@ const withMapboxNavigation = (config, options = {}) => {
       }
     }
 
-
     mod.modResults.contents = contents;
     return mod;
   });
@@ -67,37 +60,32 @@ const withMapboxNavigation = (config, options = {}) => {
   config = withAppBuildGradle(config, (mod) => {
     let contents = mod.modResults.contents;
 
-    // Force NDK 27 for 16 KB page size
     if (!contents.includes('ndkVersion')) {
       contents = contents.replace(
         /android\s*\{/,
-        `android {\n    ndkVersion "${NDK_VERSION}" // Required for 16 KB page size (expo-mapbox-navigation)`
+        `android {\n    ndkVersion "${NDK_VERSION}"`
       );
     } else if (!contents.includes(NDK_VERSION)) {
       contents = contents.replace(
         /ndkVersion\s+["'][^"']*["']/,
-        `ndkVersion "${NDK_VERSION}" // Forced by expo-mapbox-navigation for 16KB page size`
+        `ndkVersion "${NDK_VERSION}"`
       );
     }
 
-    // Enable useLegacyPackaging = false for 16 KB page alignment
     if (!contents.includes('useLegacyPackaging')) {
       contents = contents.replace(
         /android\s*\{/,
-        `android {\n    packagingOptions {\n        jniLibs {\n            useLegacyPackaging = false // 16 KB page size support\n        }\n    }`
+        `android {\n    packagingOptions {\n        jniLibs {\n            useLegacyPackaging = false\n        }\n    }`
       );
     }
 
-    // Pin Mapbox Maps + Navigation versions via resolutionStrategy
     const resolutionBlock = `
 configurations.all {
     resolutionStrategy {
-        // Force Mapbox Maps SDK >= ${mapboxMapsVersion} — required for NavigationCamera compatibility (issue #43)
         force "com.mapbox.maps:android:${mapboxMapsVersion}"
         force "com.mapbox.maps:android-ndk27:${mapboxMapsVersion}"
     }
 }`;
-
     if (!contents.includes('com.mapbox.maps:android:')) {
       contents = contents + '\n' + resolutionBlock;
     }
@@ -106,31 +94,57 @@ configurations.all {
     return mod;
   });
 
-  // ── Android: AndroidManifest — add access token as meta-data ─────────────
+  // ── Android: AndroidManifest ─────────────────────────────────────────────
   config = withAndroidManifest(config, (mod) => {
-    const mainApp = mod.modResults.manifest.application?.[0];
-    if (mainApp) {
-      if (!mainApp['meta-data']) {
-        mainApp['meta-data'] = [];
+    const manifest = mod.modResults.manifest;
+
+    // ── Permissions required by Mapbox Navigation SDK (targetSdk 35) ────────
+    //
+    // SecurityException: Starting FGS with type location requires:
+    //   - android.permission.FOREGROUND_SERVICE_LOCATION   (mandatory API 34+)
+    //   - android.permission.FOREGROUND_SERVICE             (mandatory)
+    //   - android.permission.ACCESS_FINE_LOCATION           (at least one of coarse/fine)
+    //   - android.permission.ACCESS_COARSE_LOCATION
+    //
+    const requiredPermissions = [
+      'android.permission.ACCESS_FINE_LOCATION',
+      'android.permission.ACCESS_COARSE_LOCATION',
+      'android.permission.FOREGROUND_SERVICE',
+      'android.permission.FOREGROUND_SERVICE_LOCATION',  // ← fixes the crash
+      'android.permission.POST_NOTIFICATIONS',            // needed for nav notification (API 33+)
+    ];
+
+    if (!manifest['uses-permission']) {
+      manifest['uses-permission'] = [];
+    }
+
+    for (const permission of requiredPermissions) {
+      const already = manifest['uses-permission'].some(
+        (p) => p.$?.['android:name'] === permission
+      );
+      if (!already) {
+        manifest['uses-permission'].push({ $: { 'android:name': permission } });
       }
+    }
 
+    // ── Mapbox access token meta-data ────────────────────────────────────────
+    const mainApp = manifest.application?.[0];
+    if (mainApp) {
+      if (!mainApp['meta-data']) mainApp['meta-data'] = [];
       const tokenMeta = mainApp['meta-data'].find(
         (m) => m.$?.['android:name'] === 'com.mapbox.token'
       );
-
       if (!tokenMeta) {
         mainApp['meta-data'].push({
-          $: {
-            'android:name': 'com.mapbox.token',
-            'android:value': accessToken,
-          },
+          $: { 'android:name': 'com.mapbox.token', 'android:value': accessToken },
         });
       }
     }
+
     return mod;
   });
 
-  // ── Android: Write color overrides resource file ──────────────────────────
+  // ── Android: color overrides ─────────────────────────────────────────────
   if (Object.keys(androidColorOverrides).length > 0) {
     config = withDangerousMod(config, [
       'android',
@@ -139,27 +153,16 @@ configurations.all {
           mod.modRequest.platformProjectRoot,
           'app/src/main/res/values'
         );
-
-        if (!fs.existsSync(colorsDir)) {
-          fs.mkdirSync(colorsDir, { recursive: true });
-        }
+        if (!fs.existsSync(colorsDir)) fs.mkdirSync(colorsDir, { recursive: true });
 
         const colorEntries = Object.entries(androidColorOverrides)
           .map(([name, value]) => `    <color name="${name}">${value}</color>`)
           .join('\n');
 
-        const colorsXml = `<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by @jacques_gordon/expo-mapbox-navigation config plugin -->
-<resources>
-${colorEntries}
-</resources>
-`;
-
         fs.writeFileSync(
           path.join(colorsDir, 'mapbox_navigation_colors.xml'),
-          colorsXml
+          `<?xml version="1.0" encoding="utf-8"?>\n<resources>\n${colorEntries}\n</resources>\n`
         );
-
         return mod;
       },
     ]);
@@ -177,16 +180,12 @@ ${colorEntries}
       mod.modResults.NSLocationAlwaysAndWhenInUseUsageDescription =
         'Your location is used for turn-by-turn navigation even when the app is in the background.';
     }
-
-    if (!mod.modResults.UIBackgroundModes) {
-      mod.modResults.UIBackgroundModes = [];
-    }
+    if (!mod.modResults.UIBackgroundModes) mod.modResults.UIBackgroundModes = [];
     for (const mode of ['audio', 'location']) {
       if (!mod.modResults.UIBackgroundModes.includes(mode)) {
         mod.modResults.UIBackgroundModes.push(mode);
       }
     }
-
     return mod;
   });
 

package/package.json

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

package/plugin/src/index.js

@@ -4,8 +4,6 @@ const path = require('path');
 
 const NDK_VERSION = '27.0.12077973';
 const MAPBOX_MAPS_MIN_VERSION = '11.11.0';
-// Navigation SDK v3 uses com.mapbox.navigationcore group
-const MAPBOX_NAV_VERSION = '3.8.1';
 
 const withMapboxNavigation = (config, options = {}) => {
   const {
@@ -22,13 +20,11 @@ const withMapboxNavigation = (config, options = {}) => {
     );
   }
 
-  // Validate mapboxMapsVersion >= 11.11.0
   const [major, minor] = mapboxMapsVersion.split('.').map(Number);
   if (major < 11 || (major === 11 && minor < 11)) {
     throw new Error(
       `[@jacques_gordon/expo-mapbox-navigation] mapboxMapsVersion must be >= 11.11.0.\n` +
-      `Provided: ${mapboxMapsVersion}\n` +
-      `This minimum version is required to fix the CameraAnimationsUtils crash (issue #43).`
+      `Provided: ${mapboxMapsVersion}`
     );
   }
 
@@ -36,7 +32,6 @@ const withMapboxNavigation = (config, options = {}) => {
   config = withProjectBuildGradle(config, (mod) => {
     let contents = mod.modResults.contents;
 
-    // Add Mapbox Maven repo if not already present
     if (!contents.includes('api.mapbox.com/downloads/v2/releases/maven')) {
       const mavenBlock = `
         maven {
@@ -49,7 +44,6 @@ const withMapboxNavigation = (config, options = {}) => {
                     : System.getenv('MAPBOX_DOWNLOADS_TOKEN') ?: ""
             }
         }`;
-
       if (contents.includes('allprojects') && contents.includes('repositories')) {
         contents = contents.replace(
           /allprojects\s*\{[\s\S]*?repositories\s*\{/,
@@ -58,7 +52,6 @@ const withMapboxNavigation = (config, options = {}) => {
       }
     }
 
-
     mod.modResults.contents = contents;
     return mod;
   });
@@ -67,37 +60,32 @@ const withMapboxNavigation = (config, options = {}) => {
   config = withAppBuildGradle(config, (mod) => {
     let contents = mod.modResults.contents;
 
-    // Force NDK 27 for 16 KB page size
     if (!contents.includes('ndkVersion')) {
       contents = contents.replace(
         /android\s*\{/,
-        `android {\n    ndkVersion "${NDK_VERSION}" // Required for 16 KB page size (expo-mapbox-navigation)`
+        `android {\n    ndkVersion "${NDK_VERSION}"`
       );
     } else if (!contents.includes(NDK_VERSION)) {
       contents = contents.replace(
         /ndkVersion\s+["'][^"']*["']/,
-        `ndkVersion "${NDK_VERSION}" // Forced by expo-mapbox-navigation for 16KB page size`
+        `ndkVersion "${NDK_VERSION}"`
       );
     }
 
-    // Enable useLegacyPackaging = false for 16 KB page alignment
     if (!contents.includes('useLegacyPackaging')) {
       contents = contents.replace(
         /android\s*\{/,
-        `android {\n    packagingOptions {\n        jniLibs {\n            useLegacyPackaging = false // 16 KB page size support\n        }\n    }`
+        `android {\n    packagingOptions {\n        jniLibs {\n            useLegacyPackaging = false\n        }\n    }`
       );
     }
 
-    // Pin Mapbox Maps + Navigation versions via resolutionStrategy
     const resolutionBlock = `
 configurations.all {
     resolutionStrategy {
-        // Force Mapbox Maps SDK >= ${mapboxMapsVersion} — required for NavigationCamera compatibility (issue #43)
         force "com.mapbox.maps:android:${mapboxMapsVersion}"
         force "com.mapbox.maps:android-ndk27:${mapboxMapsVersion}"
     }
 }`;
-
     if (!contents.includes('com.mapbox.maps:android:')) {
       contents = contents + '\n' + resolutionBlock;
     }
@@ -106,31 +94,57 @@ configurations.all {
     return mod;
   });
 
-  // ── Android: AndroidManifest — add access token as meta-data ─────────────
+  // ── Android: AndroidManifest ─────────────────────────────────────────────
   config = withAndroidManifest(config, (mod) => {
-    const mainApp = mod.modResults.manifest.application?.[0];
-    if (mainApp) {
-      if (!mainApp['meta-data']) {
-        mainApp['meta-data'] = [];
+    const manifest = mod.modResults.manifest;
+
+    // ── Permissions required by Mapbox Navigation SDK (targetSdk 35) ────────
+    //
+    // SecurityException: Starting FGS with type location requires:
+    //   - android.permission.FOREGROUND_SERVICE_LOCATION   (mandatory API 34+)
+    //   - android.permission.FOREGROUND_SERVICE             (mandatory)
+    //   - android.permission.ACCESS_FINE_LOCATION           (at least one of coarse/fine)
+    //   - android.permission.ACCESS_COARSE_LOCATION
+    //
+    const requiredPermissions = [
+      'android.permission.ACCESS_FINE_LOCATION',
+      'android.permission.ACCESS_COARSE_LOCATION',
+      'android.permission.FOREGROUND_SERVICE',
+      'android.permission.FOREGROUND_SERVICE_LOCATION',  // ← fixes the crash
+      'android.permission.POST_NOTIFICATIONS',            // needed for nav notification (API 33+)
+    ];
+
+    if (!manifest['uses-permission']) {
+      manifest['uses-permission'] = [];
+    }
+
+    for (const permission of requiredPermissions) {
+      const already = manifest['uses-permission'].some(
+        (p) => p.$?.['android:name'] === permission
+      );
+      if (!already) {
+        manifest['uses-permission'].push({ $: { 'android:name': permission } });
       }
+    }
 
+    // ── Mapbox access token meta-data ────────────────────────────────────────
+    const mainApp = manifest.application?.[0];
+    if (mainApp) {
+      if (!mainApp['meta-data']) mainApp['meta-data'] = [];
       const tokenMeta = mainApp['meta-data'].find(
         (m) => m.$?.['android:name'] === 'com.mapbox.token'
       );
-
       if (!tokenMeta) {
         mainApp['meta-data'].push({
-          $: {
-            'android:name': 'com.mapbox.token',
-            'android:value': accessToken,
-          },
+          $: { 'android:name': 'com.mapbox.token', 'android:value': accessToken },
         });
       }
     }
+
     return mod;
   });
 
-  // ── Android: Write color overrides resource file ──────────────────────────
+  // ── Android: color overrides ─────────────────────────────────────────────
   if (Object.keys(androidColorOverrides).length > 0) {
     config = withDangerousMod(config, [
       'android',
@@ -139,27 +153,16 @@ configurations.all {
           mod.modRequest.platformProjectRoot,
           'app/src/main/res/values'
         );
-
-        if (!fs.existsSync(colorsDir)) {
-          fs.mkdirSync(colorsDir, { recursive: true });
-        }
+        if (!fs.existsSync(colorsDir)) fs.mkdirSync(colorsDir, { recursive: true });
 
         const colorEntries = Object.entries(androidColorOverrides)
           .map(([name, value]) => `    <color name="${name}">${value}</color>`)
           .join('\n');
 
-        const colorsXml = `<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by @jacques_gordon/expo-mapbox-navigation config plugin -->
-<resources>
-${colorEntries}
-</resources>
-`;
-
         fs.writeFileSync(
           path.join(colorsDir, 'mapbox_navigation_colors.xml'),
-          colorsXml
+          `<?xml version="1.0" encoding="utf-8"?>\n<resources>\n${colorEntries}\n</resources>\n`
         );
-
         return mod;
       },
     ]);
@@ -177,16 +180,12 @@ ${colorEntries}
       mod.modResults.NSLocationAlwaysAndWhenInUseUsageDescription =
         'Your location is used for turn-by-turn navigation even when the app is in the background.';
     }
-
-    if (!mod.modResults.UIBackgroundModes) {
-      mod.modResults.UIBackgroundModes = [];
-    }
+    if (!mod.modResults.UIBackgroundModes) mod.modResults.UIBackgroundModes = [];
     for (const mode of ['audio', 'location']) {
       if (!mod.modResults.UIBackgroundModes.includes(mode)) {
         mod.modResults.UIBackgroundModes.push(mode);
       }
     }
-
     return mod;
   });