@jacques_gordon/expo-mapbox-navigation 2.2.1 → 2.2.3

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -0,0 +1,2 @@
+#Tue Jun 30 22:43:09 CEST 2026
+gradle.version=8.9

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
@@ -903,6 +928,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jacques_gordon/expo-mapbox-navigation",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "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",
@@ -9,7 +9,7 @@
     "clean": "rm -rf build",
     "lint": "tsc --noEmit",
     "test": "echo \"Tests require a full Expo project with EAS Build. See README.\"",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": ""
   },
   "keywords": [
     "expo",

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;