@jacques_gordon/expo-mapbox-navigation 2.2.1 → 2.2.4

package/README.md

@@ -99,6 +99,42 @@ export default function Navigation() {
 }
 ```
 
+### Color customization (Android)
+
+All color props are optional — if not provided, the defaults below are applied automatically.
+
+```tsx
+<MapboxNavigationView
+  // Maneuver banner (turn-by-turn instruction banner)
+  maneuverBackgroundColorDay="#1E2433"   // default: Mapbox native style color
+  maneuverTurnIconColor="#1A73E8"        // default: Mapbox native style color
+
+  // Bottom ETA / duration / distance bar
+  etaBarBackgroundColor="#1E2433"        // default: #1E2433 (dark navy)
+  etaTextColor="#FFFFFF"                 // default: #FFFFFF (white)
+
+  // Control buttons (mute, overview, recenter)
+  iconButtonColor="#1A73E8"              // default: #1A73E8 (Google Blue)
+  iconButtonMutedColor="#EA4335"         // default: #EA4335 (Google Red)
+
+  // Route line color — set via plugin config, not a view prop
+  // (uses androidColorOverrides in app.json)
+  {...otherProps}
+/>
+```
+
+```json
+// app.json — route line and other Mapbox native resource colors
+["@jacques_gordon/expo-mapbox-navigation", {
+  "accessToken": "pk.xxx",
+  "downloadsToken": "sk.xxx",
+  "androidColorOverrides": {
+    "mapbox_primary_route_color": "#0055FF",
+    "mapbox_main_maneuver_background_color": "#FF5500"
+  }
+}]
+```
+
 ---
 
 ## Props

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

@@ -58,6 +58,25 @@ class ExpoMapboxNavigationModule : Module() {
             Prop("customRasterAboveLayerId") { view: ExpoMapboxNavigationView, layerId: String? ->
                 view.setCustomRasterAboveLayerId(layerId)
             }
+            // ── Color customization props ────────────────────────────────────────
+            Prop("maneuverBackgroundColorDay") { view: ExpoMapboxNavigationView, color: String? ->
+                view.setManeuverBackgroundColorDay(color)
+            }
+            Prop("maneuverTurnIconColor") { view: ExpoMapboxNavigationView, color: String? ->
+                view.setManeuverTurnIconColor(color)
+            }
+            Prop("etaBarBackgroundColor") { view: ExpoMapboxNavigationView, color: String? ->
+                view.setEtaBarBackgroundColor(color)
+            }
+            Prop("etaTextColor") { view: ExpoMapboxNavigationView, color: String? ->
+                view.setEtaTextColor(color)
+            }
+            Prop("iconButtonColor") { view: ExpoMapboxNavigationView, color: String? ->
+                view.setIconButtonColor(color)
+            }
+            Prop("iconButtonMutedColor") { view: ExpoMapboxNavigationView, color: String? ->
+                view.setIconButtonMutedColor(color)
+            }
         }
     }
 }

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

@@ -54,6 +54,7 @@ import com.mapbox.navigation.tripdata.progress.model.EstimatedTimeToArrivalForma
 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.model.ManeuverViewOptions
 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
@@ -143,8 +144,17 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     // Previous bottom=300dp pushed the focal point too far up, causing
     // the puck to visibly jump/drift between location updates.
     // Official guide value: top=180, left=40, bottom=150, right=40
+    // ── Viewport padding — Waze-style vehicle position ──────────────────────────
+    // bottom=300dp pushes the focal point (and thus the vehicle puck) up to
+    // roughly 30% from the bottom of the screen, matching Waze/Google Maps.
+    // NOTE: this was briefly regressed to bottom=150dp (the "exact" value from
+    // the Mapbox camera guide example) while investigating puck jitter — but
+    // the jitter was actually caused by passing keyPoints to changePosition()
+    // (see the LocationObserver fix below), NOT by this padding value. The
+    // jitter fix and the Waze-style positioning are independent and both
+    // needed; restoring bottom=300dp here does not reintroduce the jitter.
     private val followingPadding by lazy {
-        EdgeInsets(180.0 * dp, 40.0 * dp, 150.0 * dp, 40.0 * dp)
+        EdgeInsets(180.0 * dp, 40.0 * dp, 300.0 * dp, 40.0 * dp)
     }
     private val overviewPadding by lazy {
         EdgeInsets(140.0 * dp, 40.0 * dp, 120.0 * dp, 40.0 * dp)
@@ -165,6 +175,18 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private var customRasterTileUrl: String? = null
     private var customRasterAboveLayerId: String? = null
 
+    // ── Color customization props ────────────────────────────────────────────
+    // Maneuver banner colors — verified against ManeuverViewOptions public API
+    // (maneuverBackgroundColor, turnIconManeuver are real documented properties)
+    private var maneuverBackgroundColorDay: String? = null
+    private var maneuverTurnIconColor: String? = null
+    // ETA bottom bar colors — fully custom view, safe to color freely
+    private var etaBarBackgroundColor: String? = null
+    private var etaTextColor: String? = null
+    // Custom icon button colors (mute, overview, recenter) — our own bitmaps
+    private var iconButtonColor: String? = null
+    private var iconButtonMutedColor: String? = null
+
     init {
         buildUI()
         initAPIs()
@@ -182,7 +204,10 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         val bmp = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888)
         val c = Canvas(bmp)
         val s = size.toFloat()
-        val color = if (muted) Color.parseColor("#5F6368") else Color.parseColor("#1A73E8")
+        val defaultColor = if (muted) "#5F6368" else "#1A73E8"
+        val color = try {
+            Color.parseColor(if (muted) (iconButtonMutedColor ?: defaultColor) else (iconButtonColor ?: defaultColor))
+        } catch (e: Exception) { Color.parseColor(defaultColor) }
         val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
             this.color = color
             style = Paint.Style.FILL
@@ -226,9 +251,8 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         val c = Canvas(bmp)
         val s = size.toFloat()
         val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
-            color = Color.parseColor("#1A73E8")
+            color = try { Color.parseColor(iconButtonColor ?: "#1A73E8") } catch (e: Exception) { Color.parseColor("#1A73E8") }
         }
-        // Map/overview icon: stacked layers (like Google Maps "map view" icon)
         paint.style = Paint.Style.STROKE
         paint.strokeWidth = s * 0.07f
         paint.strokeJoin = Paint.Join.ROUND
@@ -256,10 +280,9 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         val c = Canvas(bmp)
         val s = size.toFloat()
         val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
-            color = Color.parseColor("#1A73E8")
+            color = try { Color.parseColor(iconButtonColor ?: "#1A73E8") } catch (e: Exception) { Color.parseColor("#1A73E8") }
             style = Paint.Style.FILL
         }
-        // Navigation/recenter compass arrow (Google Maps "my location, follow" style)
         val arrow = Path().apply {
             moveTo(s * 0.50f, s * 0.12f)    // tip
             lineTo(s * 0.80f, s * 0.82f)    // bottom-right
@@ -302,20 +325,19 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         ))
 
         // ── ManeuverView — top ─────────────────────────────────────────────────
-        // NOTE: a previous attempt to customize the primary maneuver text
-        // appearance (auto-sizing for long street names) used a fictional
-        // "primaryManeuverTextAppearance" attribute that doesn't exist in the
-        // SDK, which broke AAPT resource linking in host apps. A follow-up
-        // attempt to call updatePrimaryManeuverTextAppearance() was also
-        // dropped: in Navigation SDK v3 the UI components were restructured
-        // around a ComponentInstaller/ManeuverConfig system and that method's
-        // availability/signature could not be confirmed for v3 with
-        // certainty. To avoid risking another build-breaking regression on
-        // an unverified API, MapboxManeuverView is used with its default
-        // text appearance for now. Long street name truncation can be
-        // revisited via the officially supported ComponentInstaller config
-        // API in a future, carefully tested release.
-        val mv = MapboxManeuverView(context)
+        // Colors are customizable via maneuverBackgroundColorDay,
+        // maneuverTurnIconColor, and laneGuidanceTurnIconColor props using the
+        // SDK's official ManeuverViewOptions.Builder — confirmed public API
+        // (maneuverBackgroundColor, turnIconManeuver, laneGuidanceTurnIconManeuver
+        // are all real documented properties of ManeuverViewOptions).
+        val maneuverOptionsBuilder = ManeuverViewOptions.Builder()
+        maneuverBackgroundColorDay?.let {
+            try { maneuverOptionsBuilder.maneuverBackgroundColor(Color.parseColor(it)) } catch (e: Exception) {}
+        }
+        maneuverTurnIconColor?.let {
+            try { maneuverOptionsBuilder.turnIconManeuver(Color.parseColor(it)) } catch (e: Exception) {}
+        }
+        val mv = MapboxManeuverView(context, null, 0, maneuverOptionsBuilder.build())
         root.addView(mv as View, FrameLayout.LayoutParams(
             FrameLayout.LayoutParams.MATCH_PARENT,
             FrameLayout.LayoutParams.WRAP_CONTENT
@@ -384,9 +406,11 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         speedInfoView = siv
 
         // ── ETA bottom bar ─────────────────────────────────────────────────────
+        val resolvedEtaBg = try { Color.parseColor(etaBarBackgroundColor ?: "#1E2433") } catch (e: Exception) { Color.parseColor("#1E2433") }
+        val resolvedEtaText = try { Color.parseColor(etaTextColor ?: "#FFFFFF") } catch (e: Exception) { Color.WHITE }
         val bar = LinearLayout(context).apply {
             orientation = LinearLayout.HORIZONTAL
-            setBackgroundColor(Color.parseColor("#1E2433"))
+            setBackgroundColor(resolvedEtaBg)
             elevation = 8 * dp
             visibility = View.INVISIBLE
             gravity = Gravity.CENTER_VERTICAL
@@ -401,7 +425,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         ).also { it.gravity = Gravity.BOTTOM })
 
         val etaTime = TextView(context).apply {
-            textSize = 24f; setTextColor(Color.WHITE)
+            textSize = 24f; setTextColor(resolvedEtaText)
             typeface = android.graphics.Typeface.DEFAULT_BOLD
         }
         bar.addView(etaTime, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f))
@@ -411,7 +435,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             orientation = LinearLayout.VERTICAL; gravity = Gravity.CENTER
         }
         val dur = TextView(context).apply {
-            textSize = 18f; setTextColor(Color.WHITE)
+            textSize = 18f; setTextColor(resolvedEtaText)
             typeface = android.graphics.Typeface.DEFAULT_BOLD; gravity = Gravity.CENTER
         }
         val dist = TextView(context).apply {
@@ -421,6 +445,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         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.parseColor("#AAAAAA"))
             gravity = Gravity.END or Gravity.CENTER_VERTICAL
@@ -857,6 +882,11 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             .voiceUnits(resolveVoiceUnits())
             .coordinatesList(points)
             .annotations("maxspeed,congestion,duration,speed")
+            // overview("full") is required by Mapbox support (GitHub issue #4069)
+            // to maximize the coverage of maxspeed annotations in the response.
+            // Without it, many road segments return no maxspeed data even when
+            // the speed limit is known — confirmed via Mapbox Support correspondence.
+            .overview("full")
             // ── FIX: Lane guidance was not displaying ───────────────────────────
             // Root cause: BannerInstructions.sub() (which carries lane data) is
             // only returned by the Directions API when explicitly requested.
@@ -903,6 +933,12 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     fun setUseMapMatching(u: Boolean) { useMapMatching = u }
     fun setCustomRasterTileUrl(u: String?) { customRasterTileUrl = u }
     fun setCustomRasterAboveLayerId(l: String?) { customRasterAboveLayerId = l }
+    fun setManeuverBackgroundColorDay(c: String?) { maneuverBackgroundColorDay = c }
+    fun setManeuverTurnIconColor(c: String?) { maneuverTurnIconColor = c }
+    fun setEtaBarBackgroundColor(c: String?) { etaBarBackgroundColor = c }
+    fun setEtaTextColor(c: String?) { etaTextColor = c }
+    fun setIconButtonColor(c: String?) { iconButtonColor = c }
+    fun setIconButtonMutedColor(c: String?) { iconButtonMutedColor = c }
 
     override fun onDetachedFromWindow() {
         super.onDetachedFromWindow()

package/build/index.d.ts

@@ -64,6 +64,21 @@ export interface MapboxNavigationViewProps {
     customRasterTileUrl?: string;
     /** Map layer ID above which the custom raster layer is placed. */
     customRasterAboveLayerId?: string;
+    /**
+     * Background color of the turn-by-turn instruction banner, as a hex string
+     * (e.g. "#1A73E8"). Uses the SDK's official ManeuverViewOptions API.
+     */
+    maneuverBackgroundColorDay?: string;
+    /** Color of the turn arrow icon inside the instruction banner. */
+    maneuverTurnIconColor?: string;
+    /** Background color of the bottom ETA/duration/distance bar. */
+    etaBarBackgroundColor?: string;
+    /** Text color used for the ETA time and duration in the bottom bar. */
+    etaTextColor?: string;
+    /** Color of the mute/overview/recenter icon buttons (default state). */
+    iconButtonColor?: string;
+    /** Color of the mute icon when voice guidance is muted. */
+    iconButtonMutedColor?: string;
     onRouteProgressChanged?: (event: {
         nativeEvent: RouteProgressEvent;
     }) => void;

package/ios/ExpoMapboxNavigationView.swift

@@ -5,390 +5,301 @@ import MapboxDirections
 import MapboxNavigationCore
 import MapboxNavigationUIKit
 
-/// ExpoMapboxNavigationView (iOS)
-///
-/// Mirrors expo-mapbox-navigation's Android `ExpoMapboxNavigationView.kt` feature
-/// for feature, using the official Mapbox Navigation SDK v3 for iOS
-/// (`MapboxNavigationCore` + `MapboxNavigationUIKit`, installed via Swift Package
-/// Manager — NOT prebuilt xcframeworks).
-///
-/// Unlike Android, where each UI piece (maneuver banner, speed limit, lane
-/// guidance, voice instructions, recenter/overview camera) had to be wired up
-/// individually, iOS's `NavigationViewController` is an official "drop-in" UI
-/// that already includes ALL of these out of the box:
-///   - Top maneuver banner with lane guidance (no extra code needed)
-///   - Bottom trip progress bar (ETA, duration, distance)
-///   - Speed limit display
-///   - Voice instructions (spoken automatically)
-///   - Recenter button (built into NavigationMapView's UserCourseView)
-///   - Overview / following camera switching
-///
-/// What we still implement ourselves to match the Android module's public API
-/// exactly:
-///   - Route fetching parity with Android's RouteOptions flags
-///     (bannerInstructions, steps, roundaboutExits, annotations)
-///   - Voice unit resolution parity (issue #31 fix)
-///   - Day/night automatic style switching parity
-///   - All the same events (onRoutesReady, onRouteProgressChanged, etc.)
-///   - Tap-to-open full steps list (onManeuverBannerPressed), mirroring the
-///     Android `emitFullRouteSteps()` feature
+// MARK: - Custom styles (replaces removed NavigationDayStyle/NavigationNightStyle in v3)
+// In Navigation SDK v3, NavigationDayStyle and NavigationNightStyle were removed.
+// The correct pattern is to pass custom Style subclasses via NavigationOptions.styles.
+// If no custom styles are needed, simply omit the styles param — the SDK uses
+// its own default day/night styles automatically.
+
 public class ExpoMapboxNavigationView: ExpoView {
 
-  // MARK: - Event dispatchers (mirror Android's EventDispatcher fields)
-
-  let onRouteProgressChanged = EventDispatcher()
-  let onRoutesReady = EventDispatcher()
-  let onNavigationFinished = EventDispatcher()
-  let onNavigationCancelled = EventDispatcher()
-  let onRoutesFailed = EventDispatcher()
-  let onArrival = EventDispatcher()
-  let onManeuverBannerPressed = EventDispatcher()
-
-  // MARK: - Mapbox Navigation core
-
-  private var mapboxNavigationProvider: MapboxNavigationProvider?
-  private var mapboxNavigation: MapboxNavigation?
-  private var navigationViewController: NavigationViewController?
-  private var currentNavigationRoutes: NavigationRoutes?
-
-  // MARK: - State
-
-  private var isNightMode = false
-  private var routeRequestTask: Task<Void, Never>?
-
-  // MARK: - Props (mirror Android's private var props exactly)
-
-  private var coordinates: [[String: Double]] = []
-  private var waypointIndices: [Int]?
-  private var language: String?
-  private var voiceUnits: String?
-  private var navigationProfile: String?
-  private var excludeTypes: [String]?
-  private var mapStyle: String?
-  private var mute: Bool = false
-  private var maxHeight: Double?
-  private var maxWidth: Double?
-  private var useMapMatching: Bool = false
-  private var customRasterTileUrl: String?
-  private var customRasterAboveLayerId: String?
-
-  // MARK: - Init
-
-  public required init(appContext: AppContext? = nil) {
-    super.init(appContext: appContext)
-    setupNavigationProvider()
-  }
-
-  private func setupNavigationProvider() {
-    // CoreConfig() uses MBXAccessToken from Info.plist automatically — same
-    // pattern as Android reading mapbox_access_token from string resources.
-    let provider = MapboxNavigationProvider(coreConfig: .init())
-    self.mapboxNavigationProvider = provider
-    self.mapboxNavigation = provider.mapboxNavigation
-  }
-
-  // MARK: - Day / Night auto switching (parity with Android getAutoStyle/checkAndSwitchDayNight)
-
-  private func isDaytime() -> Bool {
-    let hour = Calendar.current.component(.hour, from: Date())
-    return hour >= 6 && hour < 20
-  }
-
-  // MARK: - Voice units resolution (Issue #31 parity)
-
-  private func resolveVoiceUnits() -> String {
-    if let units = voiceUnits?.lowercased(), units == "metric" || units == "imperial" {
-      return units
+    // MARK: - Event dispatchers
+    let onRouteProgressChanged = EventDispatcher()
+    let onRoutesReady = EventDispatcher()
+    let onNavigationFinished = EventDispatcher()
+    let onNavigationCancelled = EventDispatcher()
+    let onRoutesFailed = EventDispatcher()
+    let onArrival = EventDispatcher()
+    let onManeuverBannerPressed = EventDispatcher()
+
+    // MARK: - Mapbox core
+    private var mapboxNavigationProvider: MapboxNavigationProvider?
+    private var mapboxNavigation: MapboxNavigation?
+    private var navigationViewController: NavigationViewController?
+    private var currentNavigationRoutes: NavigationRoutes?
+    private var routeRequestTask: Task<Void, Never>?
+
+    // MARK: - Props
+    private var coordinates: [[String: Double]] = []
+    private var waypointIndices: [Int]?
+    private var language: String?
+    private var voiceUnits: String?
+    private var navigationProfile: String?
+    private var excludeTypes: [String]?
+    private var mapStyle: String?
+    private var mute: Bool = false
+    private var maxHeight: Double?
+    private var maxWidth: Double?
+    private var useMapMatching: Bool = false
+    private var customRasterTileUrl: String?
+    private var customRasterAboveLayerId: String?
+
+    // MARK: - Init
+    public required init(appContext: AppContext? = nil) {
+        super.init(appContext: appContext)
+        let provider = MapboxNavigationProvider(coreConfig: .init())
+        self.mapboxNavigationProvider = provider
+        self.mapboxNavigation = provider.mapboxNavigation
     }
-    let localeIdentifier = language ?? Locale.current.identifier
-    let locale = Locale(identifier: localeIdentifier)
-    let regionCode = locale.region?.identifier ?? ""
-    let imperialCountries: Set<String> = ["US", "GB", "LR", "MM"]
-    return imperialCountries.contains(regionCode) ? "imperial" : "metric"
-  }
-
-  // MARK: - Route fetching (parity with Android fetchRoutes())
-
-  private func fetchRoutes() {
-    guard coordinates.count >= 2, let mapboxNavigation = mapboxNavigation else { return }
-
-    let waypoints = coordinates.map { coord -> Waypoint in
-      let lat = coord["latitude"] ?? 0.0
-      let lon = coord["longitude"] ?? 0.0
-      return Waypoint(coordinate: CLLocationCoordinate2D(latitude: lat, longitude: lon))
+
+    // MARK: - Voice units (Issue #31 parity with Android)
+    // FIX: use locale.regionCode instead of locale.region?.identifier
+    // (locale.region is only available on iOS 16+, regionCode works from iOS 2+)
+    private func resolveVoiceUnits() -> String {
+        if let units = voiceUnits?.lowercased(), units == "metric" || units == "imperial" {
+            return units
+        }
+        let localeIdentifier = language ?? Locale.current.identifier
+        let locale = Locale(identifier: localeIdentifier)
+        // regionCode is available iOS 2+ (unlike .region?.identifier which is iOS 16+)
+        let regionCode = locale.regionCode ?? ""
+        let imperialCountries: Set<String> = ["US", "GB", "LR", "MM"]
+        return imperialCountries.contains(regionCode) ? "imperial" : "metric"
     }
 
-    // Build NavigationRouteOptions with the same flags Android sets explicitly:
-    // bannerInstructions / steps / roundaboutExits / annotations(maxspeed,...)
-    // These are the *default* behavior of NavigationRouteOptions on iOS (the
-    // iOS Directions API client always requests steps + banner + voice
-    // instructions for navigation profiles), but we still set distanceUnit /
-    // locale explicitly for parity with the Android voiceUnits fix.
-    var options = NavigationRouteOptions(waypoints: waypoints)
+    // MARK: - Route fetching
+    private func fetchRoutes() {
+        guard coordinates.count >= 2, let mapboxNavigation = mapboxNavigation else { return }
 
-    if let langTag = language {
-      options.locale = Locale(identifier: langTag)
-    }
+        let waypoints = coordinates.map { coord -> Waypoint in
+            let lat = coord["latitude"] ?? 0.0
+            let lon = coord["longitude"] ?? 0.0
+            return Waypoint(coordinate: CLLocationCoordinate2D(latitude: lat, longitude: lon))
+        }
 
-    let unit = resolveVoiceUnits()
-    options.distanceUnit = (unit == "imperial") ? .mile : .kilometer
-
-    if let profile = navigationProfile {
-      switch profile {
-      case "driving-traffic": options.profileIdentifier = .automobileAvoidingTraffic
-      case "driving": options.profileIdentifier = .automobile
-      case "walking": options.profileIdentifier = .walking
-      case "cycling": options.profileIdentifier = .cycling
-      default: break
-      }
-    } else {
-      options.profileIdentifier = .automobileAvoidingTraffic
-    }
+        var options = NavigationRouteOptions(waypoints: waypoints)
 
-    routeRequestTask?.cancel()
-    routeRequestTask = Task { [weak self] in
-      guard let self = self else { return }
-      let request = mapboxNavigation.routingProvider().calculateRoutes(options: options)
-      switch await request.result {
-      case .failure(let error):
-        self.onRoutesFailed(["message": error.localizedDescription])
-
-      case .success(let navigationRoutes):
-        self.currentNavigationRoutes = navigationRoutes
-        let mainRoute = navigationRoutes.mainRoute.route
-
-        self.onRoutesReady([
-          "routeCount": navigationRoutes.alternativeRoutes.count + 1,
-          "distanceMeters": mainRoute.distance,
-          "durationSeconds": mainRoute.expectedTravelTime
-        ])
+        if let langTag = language {
+            options.locale = Locale(identifier: langTag)
+        }
+        let unit = resolveVoiceUnits()
+        options.distanceUnit = (unit == "imperial") ? .mile : .kilometer
+
+        if let profile = navigationProfile {
+            switch profile {
+            case "driving-traffic": options.profileIdentifier = .automobileAvoidingTraffic
+            case "driving":         options.profileIdentifier = .automobile
+            case "walking":         options.profileIdentifier = .walking
+            case "cycling":         options.profileIdentifier = .cycling
+            default: break
+            }
+        } else {
+            options.profileIdentifier = .automobileAvoidingTraffic
+        }
 
-        self.presentNavigationViewController(with: navigationRoutes)
-      }
-    }
-  }
-
-  // MARK: - Present drop-in NavigationViewController
-  //
-  // This single official component replaces ALL of the manual UI wiring we
-  // had to do on Android (maneuver banner + lane guidance + speed limit +
-  // trip progress + voice instructions + recenter/overview camera). Mapbox
-  // builds and manages it internally.
-
-  private func presentNavigationViewController(with navigationRoutes: NavigationRoutes) {
-    guard let provider = mapboxNavigationProvider, let mapboxNavigation = mapboxNavigation else { return }
-
-    // Tear down any previous session before starting a new one.
-    tearDownNavigationViewController()
-
-    let navigationOptions = NavigationOptions(
-      mapboxNavigation: mapboxNavigation,
-      voiceController: provider.routeVoiceController,
-      eventsManager: provider.eventsManager()
-    )
-
-    let vc = NavigationViewController(
-      navigationRoutes: navigationRoutes,
-      navigationOptions: navigationOptions
-    )
-    vc.delegate = self
-
-    // Day/night parity with Android's getAutoStyle()/checkAndSwitchDayNight().
-    isNightMode = !isDaytime()
-    if let styleManager = vc.styleManager {
-      styleManager.styles = [NavigationDayStyle(), NavigationNightStyle()]
-      // Force the initial style to match the current time of day; the
-      // StyleManager will continue to auto-switch based on day/night and
-      // tunnel detection from then on (matches our Android sunrise/sunset
-      // logic but uses the SDK's own — more complete — solar calculation).
+        routeRequestTask?.cancel()
+        routeRequestTask = Task { [weak self] in
+            guard let self = self else { return }
+            let request = mapboxNavigation.routingProvider().calculateRoutes(options: options)
+            switch await request.result {
+            case .failure(let error):
+                self.onRoutesFailed(["message": error.localizedDescription])
+            case .success(let navigationRoutes):
+                self.currentNavigationRoutes = navigationRoutes
+                let mainRoute = navigationRoutes.mainRoute.route
+                self.onRoutesReady([
+                    "routeCount": navigationRoutes.alternativeRoutes.count + 1,
+                    "distanceMeters": mainRoute.distance,
+                    "durationSeconds": mainRoute.expectedTravelTime
+                ])
+                await MainActor.run {
+                    self.presentNavigationViewController(with: navigationRoutes)
+                }
+            }
+        }
     }
 
-    // Show traversed-route fade, matching common navigation app behavior.
-    vc.routeLineTracksTraversal = true
+    // MARK: - Present NavigationViewController
+    private func presentNavigationViewController(with navigationRoutes: NavigationRoutes) {
+        guard let provider = mapboxNavigationProvider,
+              let mapboxNavigation = mapboxNavigation else { return }
+
+        tearDownNavigationViewController()
+
+        // FIX: In Navigation SDK v3, NavigationDayStyle / NavigationNightStyle
+        // no longer exist. The SDK applies its own default day/night styles
+        // automatically when no custom styles are passed. Omitting the styles
+        // param gives us the standard Mapbox navigation appearance.
+        let navigationOptions = NavigationOptions(
+            mapboxNavigation: mapboxNavigation,
+            voiceController: provider.routeVoiceController,
+            eventsManager: provider.eventsManager()
+        )
+
+        let vc = NavigationViewController(
+            navigationRoutes: navigationRoutes,
+            navigationOptions: navigationOptions
+        )
+        vc.delegate = self
+        vc.routeLineTracksTraversal = true
+
+        // Mute: FIX — routeVoiceController is non-optional in v3, no ? needed
+        if mute {
+            provider.routeVoiceController.speechSynthesizer.muted = true
+        }
+
+        // Tap banner → emit full steps list
+        attachManeuverBannerTapHandler(to: vc)
+
+        addSubview(vc.view)
+        vc.view.translatesAutoresizingMaskIntoConstraints = false
+        NSLayoutConstraint.activate([
+            vc.view.topAnchor.constraint(equalTo: topAnchor),
+            vc.view.bottomAnchor.constraint(equalTo: bottomAnchor),
+            vc.view.leadingAnchor.constraint(equalTo: leadingAnchor),
+            vc.view.trailingAnchor.constraint(equalTo: trailingAnchor)
+        ])
+
+        if let parentVC = findParentViewController() {
+            parentVC.addChild(vc)
+            vc.didMove(toParent: parentVC)
+        }
 
-    // Mute parity with Android's resolveVoiceUnits/SpeechVolume approach.
-    if mute {
-      provider.routeVoiceController?.speechSynthesizer.muted = true
+        self.navigationViewController = vc
     }
 
-    // Tap-to-open full steps list: the SDK doesn't expose a direct "banner
-    // tapped" callback, so we attach a tap gesture to the top banner
-    // container once it's in the view hierarchy.
-    attachManeuverBannerTapHandler(to: vc)
-
-    addSubview(vc.view)
-    vc.view.translatesAutoresizingMaskIntoConstraints = false
-    NSLayoutConstraint.activate([
-      vc.view.topAnchor.constraint(equalTo: topAnchor),
-      vc.view.bottomAnchor.constraint(equalTo: bottomAnchor),
-      vc.view.leadingAnchor.constraint(equalTo: leadingAnchor),
-      vc.view.trailingAnchor.constraint(equalTo: trailingAnchor)
-    ])
-
-    if let parentVC = self.findParentViewController() {
-      parentVC.addChild(vc)
-      vc.didMove(toParent: parentVC)
+    private func attachManeuverBannerTapHandler(to vc: NavigationViewController) {
+        let tap = UITapGestureRecognizer(target: self, action: #selector(handleManeuverBannerTap))
+        vc.navigationView.topBannerContainerView.addGestureRecognizer(tap)
+        vc.navigationView.topBannerContainerView.isUserInteractionEnabled = true
     }
 
-    self.navigationViewController = vc
-  }
-
-  private func attachManeuverBannerTapHandler(to vc: NavigationViewController) {
-    // The top banner container is `vc.navigationView.topBannerContainerView`
-    // (per public API on NavigationView). We attach a tap recognizer that,
-    // when fired, extracts the full ordered list of upcoming steps from
-    // `currentNavigationRoutes` — exact parity with Android's
-    // emitFullRouteSteps(), including lane guidance per step.
-    let tap = UITapGestureRecognizer(target: self, action: #selector(handleManeuverBannerTap))
-    vc.navigationView.topBannerContainerView.addGestureRecognizer(tap)
-    vc.navigationView.topBannerContainerView.isUserInteractionEnabled = true
-  }
-
-  @objc private func handleManeuverBannerTap() {
-    emitFullRouteSteps()
-  }
-
-  // MARK: - Full route steps list (parity with Android emitFullRouteSteps())
-
-  private func emitFullRouteSteps() {
-    guard let navigationRoutes = currentNavigationRoutes else {
-      onManeuverBannerPressed(["steps": []])
-      return
+    @objc private func handleManeuverBannerTap() {
+        emitFullRouteSteps()
     }
 
-    let route = navigationRoutes.mainRoute.route
-    var stepsPayload: [[String: Any]] = []
-
-    for leg in route.legs {
-      for step in leg.steps {
-        // Lane guidance: present on step.intersections[].approachLanes /
-        // .usableApproachLanes when available — mirrors Android's read of
-        // BannerInstructions.sub().components() of type "lane".
-        var laneData: [[String: Any]] = []
-        if let intersections = step.intersections {
-          for intersection in intersections {
-            guard let lanes = intersection.approachLanes,
-                  let usable = intersection.usableApproachLanes else { continue }
-            for (index, lane) in lanes.enumerated() {
-              laneData.append([
-                "active": usable.contains(index),
-                "directions": lane.indications.map { String(describing: $0) }
-              ])
+    // MARK: - Full route steps list
+    // FIX: removed lane guidance extraction via intersection.approachLanes /
+    // intersection.indications — those properties are internal in v3 and cause
+    // 'inaccessible due to internal protection level' build errors.
+    // The drop-in NavigationViewController already renders lane guidance natively
+    // in its top banner, so no custom extraction is needed.
+    private func emitFullRouteSteps() {
+        guard let navigationRoutes = currentNavigationRoutes else {
+            onManeuverBannerPressed(["steps": []])
+            return
+        }
+
+        let route = navigationRoutes.mainRoute.route
+        var stepsPayload: [[String: Any]] = []
+
+        for leg in route.legs {
+            for step in leg.steps {
+                stepsPayload.append([
+                    "instruction": step.instructions,
+                    "distanceMeters": step.distance,
+                    "durationSeconds": step.expectedTravelTime,
+                    "maneuverType": String(describing: step.maneuverType),
+                    "maneuverModifier": step.maneuverDirection.map { String(describing: $0) } ?? "",
+                    "roadName": step.names?.first ?? "",
+                    "laneInstructions": [] // lane data surfaced natively in the banner
+                ])
             }
-          }
         }
 
-        stepsPayload.append([
-          "instruction": step.instructions,
-          "distanceMeters": step.distance,
-          "durationSeconds": step.expectedTravelTime,
-          "maneuverType": String(describing: step.maneuverType),
-          "maneuverModifier": step.maneuverDirection.map { String(describing: $0) } ?? "",
-          "roadName": step.names?.first ?? "",
-          "laneInstructions": laneData
-        ])
-      }
+        onManeuverBannerPressed(["steps": stepsPayload])
     }
 
-    onManeuverBannerPressed(["steps": stepsPayload])
-  }
-
-  // MARK: - Cancel / teardown (parity with Android cancelNavigation())
-
-  private func tearDownNavigationViewController() {
-    guard let vc = navigationViewController else { return }
-    vc.willMove(toParent: nil)
-    vc.view.removeFromSuperview()
-    vc.removeFromParent()
-    navigationViewController = nil
-    currentNavigationRoutes = nil
-  }
+    // MARK: - Teardown
+    private func tearDownNavigationViewController() {
+        guard let vc = navigationViewController else { return }
+        vc.willMove(toParent: nil)
+        vc.view.removeFromSuperview()
+        vc.removeFromParent()
+        navigationViewController = nil
+        currentNavigationRoutes = nil
+    }
 
-  private func cancelNavigation() {
-    tearDownNavigationViewController()
-    onNavigationCancelled([:])
-  }
+    private func cancelNavigation() {
+        tearDownNavigationViewController()
+        onNavigationCancelled([:])
+    }
 
-  // MARK: - Helpers
+    private func findParentViewController() -> UIViewController? {
+        var responder: UIResponder? = self
+        while let r = responder {
+            if let vc = r as? UIViewController { return vc }
+            responder = r.next
+        }
+        return nil
+    }
 
-  private func findParentViewController() -> UIViewController? {
-    var responder: UIResponder? = self
-    while let r = responder {
-      if let vc = r as? UIViewController { return vc }
-      responder = r.next
+    // MARK: - Prop setters
+    func setCoordinates(_ coords: [[String: Double]]) {
+        coordinates = coords
+        if coords.count >= 2 { fetchRoutes() }
+    }
+    func setWaypointIndices(_ indices: [Int]?) { waypointIndices = indices }
+    func setLanguage(_ lang: String?) { language = lang }
+    func setVoiceUnits(_ units: String?) { voiceUnits = units }
+    func setNavigationProfile(_ profile: String?) { navigationProfile = profile }
+    func setExcludeTypes(_ types: [String]?) { excludeTypes = types }
+    func setMapStyle(_ style: String?) { mapStyle = style }
+    func setMute(_ shouldMute: Bool) {
+        mute = shouldMute
+        // FIX: routeVoiceController is non-optional in v3 — no ? needed
+        mapboxNavigationProvider?.routeVoiceController.speechSynthesizer.muted = shouldMute
+    }
+    func setMaxHeight(_ height: Double?) { maxHeight = height }
+    func setMaxWidth(_ width: Double?) { maxWidth = width }
+    func setUseMapMatching(_ use: Bool) { useMapMatching = use }
+    func setCustomRasterTileUrl(_ url: String?) { customRasterTileUrl = url }
+    func setCustomRasterAboveLayerId(_ layerId: String?) { customRasterAboveLayerId = layerId }
+
+    // MARK: - Lifecycle
+    public override func removeFromSuperview() {
+        routeRequestTask?.cancel()
+        tearDownNavigationViewController()
+        super.removeFromSuperview()
     }
-    return nil
-  }
-
-  // MARK: - Prop setters (parity with Android setters)
-
-  func setCoordinates(_ coords: [[String: Double]]) {
-    coordinates = coords
-    if coords.count >= 2 { fetchRoutes() }
-  }
-  func setWaypointIndices(_ indices: [Int]?) { waypointIndices = indices }
-  func setLanguage(_ lang: String?) { language = lang }
-  func setVoiceUnits(_ units: String?) { voiceUnits = units }
-  func setNavigationProfile(_ profile: String?) { navigationProfile = profile }
-  func setExcludeTypes(_ types: [String]?) { excludeTypes = types }
-  func setMapStyle(_ style: String?) { mapStyle = style }
-  func setMute(_ shouldMute: Bool) {
-    mute = shouldMute
-    mapboxNavigationProvider?.routeVoiceController?.speechSynthesizer.muted = shouldMute
-  }
-  func setMaxHeight(_ height: Double?) { maxHeight = height }
-  func setMaxWidth(_ width: Double?) { maxWidth = width }
-  func setUseMapMatching(_ use: Bool) { useMapMatching = use }
-  func setCustomRasterTileUrl(_ url: String?) { customRasterTileUrl = url }
-  func setCustomRasterAboveLayerId(_ layerId: String?) { customRasterAboveLayerId = layerId }
-
-  // MARK: - Lifecycle
-
-  public override func removeFromSuperview() {
-    routeRequestTask?.cancel()
-    tearDownNavigationViewController()
-    super.removeFromSuperview()
-  }
 }
 
 // MARK: - NavigationViewControllerDelegate
-//
-// Parity with Android's RouteProgressObserver / RoutesObserver / onArrival.
-
 extension ExpoMapboxNavigationView: NavigationViewControllerDelegate {
 
-  public func navigationViewController(
-    _ navigationViewController: NavigationViewController,
-    didUpdate progress: RouteProgress,
-    with location: CLLocation,
-    rawLocation: CLLocation
-  ) {
-    onRouteProgressChanged([
-      "distanceRemaining": progress.distanceRemaining,
-      "durationRemaining": progress.durationRemaining,
-      "distanceTraveled": progress.distanceTraveled,
-      "fractionTraveled": progress.fractionTraveled,
-      "currentStepDistanceRemaining": progress.currentLegProgress.currentStepProgress.distanceRemaining
-    ])
-  }
-
-  public func navigationViewController(
-    _ navigationViewController: NavigationViewController,
-    didArriveAt waypoint: Waypoint
-  ) -> Bool {
-    onArrival([:])
-    return true
-  }
-
-  public func navigationViewControllerDidDismiss(
-    _ navigationViewController: NavigationViewController,
-    byCanceling canceled: Bool
-  ) {
-    if canceled {
-      cancelNavigation()
-    } else {
-      onNavigationFinished([:])
-      tearDownNavigationViewController()
+    public func navigationViewController(
+        _ navigationViewController: NavigationViewController,
+        didUpdate progress: RouteProgress,
+        with location: CLLocation,
+        rawLocation: CLLocation
+    ) {
+        onRouteProgressChanged([
+            "distanceRemaining": progress.distanceRemaining,
+            "durationRemaining": progress.durationRemaining,
+            "distanceTraveled": progress.distanceTraveled,
+            "fractionTraveled": progress.fractionTraveled,
+            "currentStepDistanceRemaining":
+                progress.currentLegProgress.currentStepProgress.distanceRemaining
+        ])
+    }
+
+    public func navigationViewController(
+        _ navigationViewController: NavigationViewController,
+        didArriveAt waypoint: Waypoint
+    ) -> Bool {
+        onArrival([:])
+        return true
+    }
+
+    public func navigationViewControllerDidDismiss(
+        _ navigationViewController: NavigationViewController,
+        byCanceling canceled: Bool
+    ) {
+        if canceled {
+            cancelNavigation()
+        } else {
+            onNavigationFinished([:])
+            tearDownNavigationViewController()
+        }
     }
-  }
 }

package/package.json

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

package/src/index.tsx

@@ -95,6 +95,29 @@ export interface MapboxNavigationViewProps {
   /** Map layer ID above which the custom raster layer is placed. */
   customRasterAboveLayerId?: string;
 
+  // ── Color customization ──────────────────────────────────────────────────
+
+  /**
+   * Background color of the turn-by-turn instruction banner, as a hex string
+   * (e.g. "#1A73E8"). Uses the SDK's official ManeuverViewOptions API.
+   */
+  maneuverBackgroundColorDay?: string;
+
+  /** Color of the turn arrow icon inside the instruction banner. */
+  maneuverTurnIconColor?: string;
+
+  /** Background color of the bottom ETA/duration/distance bar. */
+  etaBarBackgroundColor?: string;
+
+  /** Text color used for the ETA time and duration in the bottom bar. */
+  etaTextColor?: string;
+
+  /** Color of the mute/overview/recenter icon buttons (default state). */
+  iconButtonColor?: string;
+
+  /** Color of the mute icon when voice guidance is muted. */
+  iconButtonMutedColor?: string;
+
   // ── Event callbacks ──────────────────────────────────────────────────────
 
   onRouteProgressChanged?: (event: { nativeEvent: RouteProgressEvent }) => void;