@complexify/expo-mapbox-navigation 1.1.6 → 1.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -61,6 +61,8 @@ export type ExpoMapboxNavigationViewProps = {
61
61
  maneuverViewSecondaryColor?: string;
62
62
  maneuverViewTextColor?: string;
63
63
  maneuverViewBackgroundColor?: string;
64
+ instructionsTextColor?: string;
65
+ instructionsBackgroundColor?: string;
64
66
  };
65
67
  export {};
66
68
  //# sourceMappingURL=ExpoMapboxNavigation.types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ExpoMapboxNavigation.types.d.ts","sourceRoot":"","sources":["../src/ExpoMapboxNavigation.types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ExpoMapboxNavigation.types.d.ts","sourceRoot":"","sources":["../src/ExpoMapboxNavigation.types.ts"],"names":[],"mappings":"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"}
@@ -1 +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"]}
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 // Instructions View\n instructionsTextColor?: string; // Color for all instruction text\n instructionsBackgroundColor?: string; // Background color for instruction panels\n};\n"]}
@@ -58,8 +58,6 @@ class CustomDayStyle: StandardDayStyle {
58
58
  // Bottom banner text colors
59
59
  if let timeRemainingColor = customBottomBannerTimeRemainingTextColor {
60
60
  TimeRemainingLabel.appearance(for: traitCollection).textColor = timeRemainingColor
61
- TimeRemainingLabel.appearance(for: traitCollection).valueTextColor = timeRemainingColor
62
- TimeRemainingLabel.appearance(for: traitCollection).unitTextColor = timeRemainingColor
63
61
  }
64
62
  if let distanceRemainingColor = customBottomBannerDistanceRemainingTextColor {
65
63
  DistanceRemainingLabel.appearance(for: traitCollection).textColor = distanceRemainingColor
@@ -117,21 +115,48 @@ class CustomDayStyle: StandardDayStyle {
117
115
  FloatingButton.appearance(for: traitCollection).borderWidth = 1.0
118
116
  FloatingButton.appearance(for: traitCollection).cornerRadius = 4.0
119
117
 
120
- // Top Banner - Current Direction Bar (ManeuverView)
118
+ // Maneuver View (Top Banner Direction Arrow and Text)
121
119
  if let primaryColor = customManeuverViewPrimaryColor {
120
+ // Main direction arrow color
122
121
  ManeuverView.appearance(for: traitCollection).primaryColor = primaryColor
123
- }
124
- if let secondaryColor = customManeuverViewSecondaryColor {
125
- ManeuverView.appearance(for: traitCollection).secondaryColor = secondaryColor
122
+ // Also apply to the small direction icon in the top banner
123
+ ManeuverArrowView.appearance(for: traitCollection).tintColor = primaryColor
126
124
  }
127
125
 
128
- // Current Direction Background and Text
126
+ // Current step instruction styling (the white bar with road name)
129
127
  if let bgColor = customManeuverViewBackgroundColor {
128
+ // The white background bar
129
+ InstructionsBannerView.appearance(for: traitCollection).backgroundColor = bgColor
130
+ // The small direction preview also needs this background
130
131
  ManeuverView.appearance(for: traitCollection).backgroundColor = bgColor
131
132
  }
133
+
134
+ // Text colors for the current instruction
135
+ if let textColor = customManeuverViewTextColor {
136
+ // Main instruction text (e.g., "Simonton Road")
137
+ InstructionLabel.appearance(for: traitCollection).textColor = textColor
138
+ // Distance text (e.g., "250 ft")
139
+ NextBannerView.appearance(for: traitCollection).distanceLabel.textColor = textColor
140
+ // Street name in the banner
141
+ NextBannerView.appearance(for: traitCollection).primaryLabel.textColor = textColor
142
+ // Additional instructions
143
+ NextBannerView.appearance(for: traitCollection).secondaryLabel.textColor = textColor
144
+ }
145
+
146
+ // Steps list styling (the drop-down view with all directions)
132
147
  if let textColor = customManeuverViewTextColor {
133
- StepInstructionsView.appearance(for: traitCollection).primaryLabel.textColor = textColor
134
- StepInstructionsView.appearance(for: traitCollection).secondaryLabel.textColor = textColor
148
+ // Step instructions text
149
+ StepsTableViewCell.appearance(for: traitCollection).primaryLabel.textColor = textColor
150
+ StepsTableViewCell.appearance(for: traitCollection).secondaryLabel.textColor = textColor
151
+ // Distance for each step
152
+ StepsTableViewCell.appearance(for: traitCollection).distanceLabel.textColor = textColor
153
+ }
154
+
155
+ if let bgColor = customManeuverViewBackgroundColor {
156
+ // Background of each step in the list
157
+ StepsTableViewCell.appearance(for: traitCollection).backgroundColor = bgColor
158
+ // Background of the entire steps list
159
+ StepsViewController.appearance(for: traitCollection).view.backgroundColor = bgColor
135
160
  }
136
161
  }
137
162
  }
@@ -233,6 +233,18 @@ public class ExpoMapboxNavigationModule: Module {
233
233
  view.controller.setManeuverViewBackgroundColor(hexColor: hexColor)
234
234
  }
235
235
  }
236
+
237
+ Prop("instructionsTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
238
+ if let hexColor = color {
239
+ view.controller.setInstructionsTextColor(hexColor: hexColor)
240
+ }
241
+ }
242
+
243
+ Prop("instructionsBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
244
+ if let hexColor = color {
245
+ view.controller.setInstructionsBackgroundColor(hexColor: hexColor)
246
+ }
247
+ }
236
248
  }
237
249
  }
238
250
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@complexify/expo-mapbox-navigation",
3
- "version": "1.1.6",
3
+ "version": "1.1.8",
4
4
  "description": "Expo module for Mapbox's Navigation SDK",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
@@ -74,4 +74,8 @@ export type ExpoMapboxNavigationViewProps = {
74
74
  maneuverViewSecondaryColor?: string; // Secondary arrow color
75
75
  maneuverViewTextColor?: string; // Direction text color
76
76
  maneuverViewBackgroundColor?: string; // Background of the direction bar
77
+
78
+ // Instructions View
79
+ instructionsTextColor?: string; // Color for all instruction text
80
+ instructionsBackgroundColor?: string; // Background color for instruction panels
77
81
  };