@complexify/expo-mapbox-navigation 1.1.6 → 1.1.8

package/build/ExpoMapboxNavigation.types.d.ts

@@ -61,6 +61,8 @@ export type ExpoMapboxNavigationViewProps = {
     maneuverViewSecondaryColor?: string;
     maneuverViewTextColor?: string;
     maneuverViewBackgroundColor?: string;
+    instructionsTextColor?: string;
+    instructionsBackgroundColor?: string;
 };
 export {};
 //# sourceMappingURL=ExpoMapboxNavigation.types.d.ts.map

package/build/ExpoMapboxNavigation.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoMapboxNavigation.types.d.ts","sourceRoot":"","sources":["../src/ExpoMapboxNavigation.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,KAAK,aAAa,GAAG;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,WAAW,EAAE,KAAK,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,aAAa,CAAA;KAAE,KAAK,IAAI,CAAC;IACzE,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC1B,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;KACxC,KAAK,IAAI,CAAC;IACX,yBAAyB,CAAC,EAAE,MAAM,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAG7B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAGjC,+BAA+B,CAAC,EAAE,MAAM,CAAC;IACzC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAGnC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,kCAAkC,CAAC,EAAE,MAAM,CAAC;IAC5C,sCAAsC,CAAC,EAAE,MAAM,CAAC;IAChD,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAG1C,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAGjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAG/B,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAGpC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAGpC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC,CAAC"}
+{"version":3,"file":"ExpoMapboxNavigation.types.d.ts","sourceRoot":"","sources":["../src/ExpoMapboxNavigation.types.ts"],"names":[],"mappings":"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"}

package/build/ExpoMapboxNavigation.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoMapboxNavigation.types.js","sourceRoot":"","sources":["../src/ExpoMapboxNavigation.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ViewStyle, StyleProp } from \"react-native\";\n\ntype ProgressEvent = {\n  distanceRemaining: number;\n  distanceTraveled: number;\n  durationRemaining: number;\n  fractionTraveled: number;\n};\n\nexport type ExpoMapboxNavigationViewProps = {\n  coordinates: Array<{ latitude: number; longitude: number }>;\n  waypointIndices?: number[];\n  useRouteMatchingApi?: boolean;\n  locale?: string;\n  routeProfile?: string;\n  routeExcludeList?: string[];\n  mapStyle?: string;\n  mute?: boolean;\n  routeColor?: string;\n  routeAlternateColor?: string;\n  routeCasingColor?: string;\n  routeAlternateCasingColor?: string;\n  traversedRouteColor?: string;\n  maneuverArrowColor?: string;\n  onRouteProgressChanged?: (event: { nativeEvent: ProgressEvent }) => void;\n  onCancelNavigation?: () => void;\n  onWaypointArrival?: (event: {\n    nativeEvent: ProgressEvent | undefined;\n  }) => void;\n  onFinalDestinationArrival?: () => void;\n  onRouteChanged?: () => void;\n  onUserOffRoute?: () => void;\n  onRoutesLoaded?: () => void;\n  style?: StyleProp<ViewStyle>;\n\n  // Top Banner (1)\n  topBannerBackgroundColor?: string;\n  topBannerPrimaryTextColor?: string;\n  topBannerSecondaryTextColor?: string;\n  topBannerDistanceTextColor?: string;\n  topBannerSeparatorColor?: string;\n\n  // Information Stack (2)\n  informationStackBackgroundColor?: string;\n  informationStackTextColor?: string;\n\n  // Bottom Banner (3)\n  bottomBannerBackgroundColor?: string;\n  bottomBannerTimeRemainingTextColor?: string;\n  bottomBannerDistanceRemainingTextColor?: string;\n  bottomBannerArrivalTimeTextColor?: string;\n\n  // Resume Button (4)\n  resumeButtonBackgroundColor?: string;\n  resumeButtonTextColor?: string;\n  resumeButtonBorderColor?: string;\n\n  // Speed Limit View (5)\n  speedLimitBackgroundColor?: string;\n  speedLimitTextColor?: string;\n  speedLimitBorderColor?: string;\n\n  // Floating Stack (6)\n  floatingStackBackgroundColor?: string;\n  floatingButtonsBackgroundColor?: string;\n  floatingButtonsTextColor?: string;\n  floatingButtonsBorderColor?: string;\n\n  // Way Name Label (8)\n  wayNameViewBackgroundColor?: string;\n\n  // Maneuver View (Direction Arrow and Text)\n  maneuverViewPrimaryColor?: string;    // Main arrow color\n  maneuverViewSecondaryColor?: string;  // Secondary arrow color\n  maneuverViewTextColor?: string;       // Direction text color\n  maneuverViewBackgroundColor?: string; // Background of the direction bar\n};\n"]}
+{"version":3,"file":"ExpoMapboxNavigation.types.js","sourceRoot":"","sources":["../src/ExpoMapboxNavigation.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ViewStyle, StyleProp } from \"react-native\";\n\ntype ProgressEvent = {\n  distanceRemaining: number;\n  distanceTraveled: number;\n  durationRemaining: number;\n  fractionTraveled: number;\n};\n\nexport type ExpoMapboxNavigationViewProps = {\n  coordinates: Array<{ latitude: number; longitude: number }>;\n  waypointIndices?: number[];\n  useRouteMatchingApi?: boolean;\n  locale?: string;\n  routeProfile?: string;\n  routeExcludeList?: string[];\n  mapStyle?: string;\n  mute?: boolean;\n  routeColor?: string;\n  routeAlternateColor?: string;\n  routeCasingColor?: string;\n  routeAlternateCasingColor?: string;\n  traversedRouteColor?: string;\n  maneuverArrowColor?: string;\n  onRouteProgressChanged?: (event: { nativeEvent: ProgressEvent }) => void;\n  onCancelNavigation?: () => void;\n  onWaypointArrival?: (event: {\n    nativeEvent: ProgressEvent | undefined;\n  }) => void;\n  onFinalDestinationArrival?: () => void;\n  onRouteChanged?: () => void;\n  onUserOffRoute?: () => void;\n  onRoutesLoaded?: () => void;\n  style?: StyleProp<ViewStyle>;\n\n  // Top Banner (1)\n  topBannerBackgroundColor?: string;\n  topBannerPrimaryTextColor?: string;\n  topBannerSecondaryTextColor?: string;\n  topBannerDistanceTextColor?: string;\n  topBannerSeparatorColor?: string;\n\n  // Information Stack (2)\n  informationStackBackgroundColor?: string;\n  informationStackTextColor?: string;\n\n  // Bottom Banner (3)\n  bottomBannerBackgroundColor?: string;\n  bottomBannerTimeRemainingTextColor?: string;\n  bottomBannerDistanceRemainingTextColor?: string;\n  bottomBannerArrivalTimeTextColor?: string;\n\n  // Resume Button (4)\n  resumeButtonBackgroundColor?: string;\n  resumeButtonTextColor?: string;\n  resumeButtonBorderColor?: string;\n\n  // Speed Limit View (5)\n  speedLimitBackgroundColor?: string;\n  speedLimitTextColor?: string;\n  speedLimitBorderColor?: string;\n\n  // Floating Stack (6)\n  floatingStackBackgroundColor?: string;\n  floatingButtonsBackgroundColor?: string;\n  floatingButtonsTextColor?: string;\n  floatingButtonsBorderColor?: string;\n\n  // Way Name Label (8)\n  wayNameViewBackgroundColor?: string;\n\n  // Maneuver View (Direction Arrow and Text)\n  maneuverViewPrimaryColor?: string;    // Main arrow color\n  maneuverViewSecondaryColor?: string;  // Secondary arrow color\n  maneuverViewTextColor?: string;       // Direction text color\n  maneuverViewBackgroundColor?: string; // Background of the direction bar\n\n  // Instructions View\n  instructionsTextColor?: string;       // Color for all instruction text\n  instructionsBackgroundColor?: string; // Background color for instruction panels\n};\n"]}

package/ios/CustomNavigationStyle.swift

@@ -58,8 +58,6 @@ class CustomDayStyle: StandardDayStyle {
         // Bottom banner text colors
         if let timeRemainingColor = customBottomBannerTimeRemainingTextColor {
             TimeRemainingLabel.appearance(for: traitCollection).textColor = timeRemainingColor
-            TimeRemainingLabel.appearance(for: traitCollection).valueTextColor = timeRemainingColor
-            TimeRemainingLabel.appearance(for: traitCollection).unitTextColor = timeRemainingColor
         }
         if let distanceRemainingColor = customBottomBannerDistanceRemainingTextColor {
             DistanceRemainingLabel.appearance(for: traitCollection).textColor = distanceRemainingColor
@@ -117,21 +115,48 @@ class CustomDayStyle: StandardDayStyle {
         FloatingButton.appearance(for: traitCollection).borderWidth = 1.0
         FloatingButton.appearance(for: traitCollection).cornerRadius = 4.0
         
-        // Top Banner - Current Direction Bar (ManeuverView)
+        // Maneuver View (Top Banner Direction Arrow and Text)
         if let primaryColor = customManeuverViewPrimaryColor {
+            // Main direction arrow color
             ManeuverView.appearance(for: traitCollection).primaryColor = primaryColor
-        }
-        if let secondaryColor = customManeuverViewSecondaryColor {
-            ManeuverView.appearance(for: traitCollection).secondaryColor = secondaryColor
+            // Also apply to the small direction icon in the top banner
+            ManeuverArrowView.appearance(for: traitCollection).tintColor = primaryColor
         }
         
-        // Current Direction Background and Text
+        // Current step instruction styling (the white bar with road name)
         if let bgColor = customManeuverViewBackgroundColor {
+            // The white background bar
+            InstructionsBannerView.appearance(for: traitCollection).backgroundColor = bgColor
+            // The small direction preview also needs this background
             ManeuverView.appearance(for: traitCollection).backgroundColor = bgColor
         }
+        
+        // Text colors for the current instruction
+        if let textColor = customManeuverViewTextColor {
+            // Main instruction text (e.g., "Simonton Road")
+            InstructionLabel.appearance(for: traitCollection).textColor = textColor
+            // Distance text (e.g., "250 ft")
+            NextBannerView.appearance(for: traitCollection).distanceLabel.textColor = textColor
+            // Street name in the banner
+            NextBannerView.appearance(for: traitCollection).primaryLabel.textColor = textColor
+            // Additional instructions
+            NextBannerView.appearance(for: traitCollection).secondaryLabel.textColor = textColor
+        }
+        
+        // Steps list styling (the drop-down view with all directions)
         if let textColor = customManeuverViewTextColor {
-            StepInstructionsView.appearance(for: traitCollection).primaryLabel.textColor = textColor
-            StepInstructionsView.appearance(for: traitCollection).secondaryLabel.textColor = textColor
+            // Step instructions text
+            StepsTableViewCell.appearance(for: traitCollection).primaryLabel.textColor = textColor
+            StepsTableViewCell.appearance(for: traitCollection).secondaryLabel.textColor = textColor
+            // Distance for each step
+            StepsTableViewCell.appearance(for: traitCollection).distanceLabel.textColor = textColor
+        }
+        
+        if let bgColor = customManeuverViewBackgroundColor {
+            // Background of each step in the list
+            StepsTableViewCell.appearance(for: traitCollection).backgroundColor = bgColor
+            // Background of the entire steps list
+            StepsViewController.appearance(for: traitCollection).view.backgroundColor = bgColor
         }
     }
 }

package/ios/ExpoMapboxNavigationModule.swift

@@ -233,6 +233,18 @@ public class ExpoMapboxNavigationModule: Module {
               view.controller.setManeuverViewBackgroundColor(hexColor: hexColor)
           }
       }
+
+      Prop("instructionsTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setInstructionsTextColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("instructionsBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setInstructionsBackgroundColor(hexColor: hexColor)
+          }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@complexify/expo-mapbox-navigation",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "Expo module for Mapbox's Navigation SDK",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/src/ExpoMapboxNavigation.types.ts

@@ -74,4 +74,8 @@ export type ExpoMapboxNavigationViewProps = {
   maneuverViewSecondaryColor?: string;  // Secondary arrow color
   maneuverViewTextColor?: string;       // Direction text color
   maneuverViewBackgroundColor?: string; // Background of the direction bar
+
+  // Instructions View
+  instructionsTextColor?: string;       // Color for all instruction text
+  instructionsBackgroundColor?: string; // Background color for instruction panels
 };