@complexify/expo-mapbox-navigation 1.1.4 → 1.1.6

package/build/ExpoMapboxNavigation.types.d.ts

@@ -57,6 +57,10 @@ export type ExpoMapboxNavigationViewProps = {
     floatingButtonsTextColor?: string;
     floatingButtonsBorderColor?: string;
     wayNameViewBackgroundColor?: string;
+    maneuverViewPrimaryColor?: string;
+    maneuverViewSecondaryColor?: string;
+    maneuverViewTextColor?: string;
+    maneuverViewBackgroundColor?: 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;CACrC,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"]}
+{"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"]}

package/ios/CustomNavigationStyle.swift

@@ -23,6 +23,12 @@ class CustomDayStyle: StandardDayStyle {
     var customFloatingButtonsBorderColor: UIColor?
     var customFloatingButtonsTextColor: UIColor?
     
+    // New properties for maneuver view
+    var customManeuverViewPrimaryColor: UIColor?
+    var customManeuverViewSecondaryColor: UIColor?
+    var customManeuverViewTextColor: UIColor?
+    var customManeuverViewBackgroundColor: UIColor?
+    
     required init() {
         super.init()
         styleType = .day
@@ -52,6 +58,8 @@ 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
@@ -97,31 +105,33 @@ class CustomDayStyle: StandardDayStyle {
         // Floating buttons customization
         if let floatingBgColor = customFloatingButtonsBackgroundColor {
             FloatingButton.appearance(for: traitCollection).backgroundColor = floatingBgColor
-            OverviewButton.appearance(for: traitCollection).backgroundColor = floatingBgColor
-            MuteButton.appearance(for: traitCollection).backgroundColor = floatingBgColor
-            FeedbackButton.appearance(for: traitCollection).backgroundColor = floatingBgColor
         }
         if let floatingTextColor = customFloatingButtonsTextColor {
             FloatingButton.appearance(for: traitCollection).tintColor = floatingTextColor
-            OverviewButton.appearance(for: traitCollection).tintColor = floatingTextColor
-            MuteButton.appearance(for: traitCollection).tintColor = floatingTextColor
-            FeedbackButton.appearance(for: traitCollection).tintColor = floatingTextColor
         }
         if let floatingBorderColor = customFloatingButtonsBorderColor {
             FloatingButton.appearance(for: traitCollection).borderColor = floatingBorderColor
-            OverviewButton.appearance(for: traitCollection).borderColor = floatingBorderColor
-            MuteButton.appearance(for: traitCollection).borderColor = floatingBorderColor
-            FeedbackButton.appearance(for: traitCollection).borderColor = floatingBorderColor
         }
         
         // Set default values for floating buttons
         FloatingButton.appearance(for: traitCollection).borderWidth = 1.0
         FloatingButton.appearance(for: traitCollection).cornerRadius = 4.0
-        OverviewButton.appearance(for: traitCollection).borderWidth = 1.0
-        OverviewButton.appearance(for: traitCollection).cornerRadius = 4.0
-        MuteButton.appearance(for: traitCollection).borderWidth = 1.0
-        MuteButton.appearance(for: traitCollection).cornerRadius = 4.0
-        FeedbackButton.appearance(for: traitCollection).borderWidth = 1.0
-        FeedbackButton.appearance(for: traitCollection).cornerRadius = 4.0
+        
+        // Top Banner - Current Direction Bar (ManeuverView)
+        if let primaryColor = customManeuverViewPrimaryColor {
+            ManeuverView.appearance(for: traitCollection).primaryColor = primaryColor
+        }
+        if let secondaryColor = customManeuverViewSecondaryColor {
+            ManeuverView.appearance(for: traitCollection).secondaryColor = secondaryColor
+        }
+        
+        // Current Direction Background and Text
+        if let bgColor = customManeuverViewBackgroundColor {
+            ManeuverView.appearance(for: traitCollection).backgroundColor = bgColor
+        }
+        if let textColor = customManeuverViewTextColor {
+            StepInstructionsView.appearance(for: traitCollection).primaryLabel.textColor = textColor
+            StepInstructionsView.appearance(for: traitCollection).secondaryLabel.textColor = textColor
+        }
     }
 }

package/ios/ExpoMapboxNavigationModule.swift

@@ -209,6 +209,30 @@ public class ExpoMapboxNavigationModule: Module {
               view.controller.setSpeedLimitBorderColor(hexColor: hexColor)
           }
       }
+
+      Prop("maneuverViewPrimaryColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setManeuverViewPrimaryColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("maneuverViewSecondaryColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setManeuverViewSecondaryColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("maneuverViewTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setManeuverViewTextColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("maneuverViewBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setManeuverViewBackgroundColor(hexColor: hexColor)
+          }
+      }
     }
   }
 }

package/ios/ExpoMapboxNavigationView.swift

@@ -344,6 +344,26 @@ class ExpoMapboxNavigationViewController: UIViewController {
         update()
     }
 
+    func setManeuverViewPrimaryColor(hexColor: String) {
+        customDayStyle.customManeuverViewPrimaryColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setManeuverViewSecondaryColor(hexColor: String) {
+        customDayStyle.customManeuverViewSecondaryColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setManeuverViewTextColor(hexColor: String) {
+        customDayStyle.customManeuverViewTextColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setManeuverViewBackgroundColor(hexColor: String) {
+        customDayStyle.customManeuverViewBackgroundColor = UIColor(hex: hexColor)
+        update()
+    }
+
     func update(){
         calculateRoutesTask?.cancel()
 

package/package.json

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

package/src/ExpoMapboxNavigation.types.ts

@@ -68,4 +68,10 @@ export type ExpoMapboxNavigationViewProps = {
 
   // Way Name Label (8)
   wayNameViewBackgroundColor?: string;
+
+  // Maneuver View (Direction Arrow and Text)
+  maneuverViewPrimaryColor?: string;    // Main arrow color
+  maneuverViewSecondaryColor?: string;  // Secondary arrow color
+  maneuverViewTextColor?: string;       // Direction text color
+  maneuverViewBackgroundColor?: string; // Background of the direction bar
 };