@complexify/expo-mapbox-navigation 1.0.9 → 1.1.0

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.
@@ -1,4 +1,4 @@
1
- import { ViewStyle, StyleProp } from "react-native/types";
1
+ import { ViewStyle, StyleProp } from "react-native";
2
2
  type ProgressEvent = {
3
3
  distanceRemaining: number;
4
4
  distanceTraveled: number;
@@ -50,6 +50,7 @@ export type ExpoMapboxNavigationViewProps = {
50
50
  resumeButtonTextColor?: string;
51
51
  speedLimitBackgroundColor?: string;
52
52
  speedLimitTextColor?: string;
53
+ speedLimitBorderColor?: string;
53
54
  floatingStackBackgroundColor?: string;
54
55
  floatingButtonsBackgroundColor?: string;
55
56
  wayNameViewBackgroundColor?: string;
@@ -1 +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,oBAAoB,CAAC;AAE1D,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;IAG/B,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAG7B,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,8BAA8B,CAAC,EAAE,MAAM,CAAC;IAGxC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC"}
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;IAG/B,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;IAGxC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"ExpoMapboxNavigation.types.js","sourceRoot":"","sources":["../src/ExpoMapboxNavigation.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ViewStyle, StyleProp } from \"react-native/types\";\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\n // Speed Limit View (5)\n speedLimitBackgroundColor?: string;\n speedLimitTextColor?: string;\n\n // Floating Stack (6)\n floatingStackBackgroundColor?: string;\n floatingButtonsBackgroundColor?: string;\n\n // Way Name Label (8)\n wayNameViewBackgroundColor?: string;\n wayNameViewTextColor?: string;\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\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\n // Way Name Label (8)\n wayNameViewBackgroundColor?: string;\n wayNameViewTextColor?: string;\n};\n"]}
@@ -0,0 +1,44 @@
1
+ import MapboxNavigation
2
+ import UIKit
3
+
4
+ class CustomNavigationStyle: DayStyle {
5
+ var speedLimitTextColor: UIColor?
6
+ var speedLimitBackgroundColor: UIColor?
7
+ var speedLimitBorderColor: UIColor?
8
+ var bottomBannerBackgroundColor: UIColor?
9
+ var wayNameTextColor: UIColor?
10
+ var wayNameBackgroundColor: UIColor?
11
+
12
+ required init() {
13
+ super.init()
14
+ styleType = .day
15
+ }
16
+
17
+ override func apply() {
18
+ super.apply()
19
+
20
+ // Speed limit customization
21
+ if let textColor = speedLimitTextColor {
22
+ SpeedLimitView.appearance().textColor = textColor
23
+ }
24
+ if let bgColor = speedLimitBackgroundColor {
25
+ SpeedLimitView.appearance().signBackColor = bgColor
26
+ }
27
+ if let borderColor = speedLimitBorderColor {
28
+ SpeedLimitView.appearance().regulatoryBorderColor = borderColor
29
+ }
30
+
31
+ // Bottom banner customization
32
+ if let bottomBannerBg = bottomBannerBackgroundColor {
33
+ BottomBannerView.appearance().backgroundColor = bottomBannerBg
34
+ }
35
+
36
+ // Way name customization
37
+ if let textColor = wayNameTextColor {
38
+ WayNameView.appearance().textColor = textColor
39
+ }
40
+ if let bgColor = wayNameBackgroundColor {
41
+ WayNameView.appearance().backgroundColor = bgColor.withAlphaComponent(0.8)
42
+ }
43
+ }
44
+ }
@@ -197,6 +197,12 @@ public class ExpoMapboxNavigationModule: Module {
197
197
  view.controller.setResumeButtonTextColor(hexColor: hexColor)
198
198
  }
199
199
  }
200
+
201
+ Prop("speedLimitBorderColor") { (view: ExpoMapboxNavigationView, color: String?) in
202
+ if let hexColor = color {
203
+ view.controller.setSpeedLimitBorderColor(hexColor: hexColor)
204
+ }
205
+ }
200
206
  }
201
207
  }
202
208
  }
@@ -4,6 +4,7 @@ import MapboxMaps
4
4
  import MapboxNavigationUIKit
5
5
  import MapboxDirections
6
6
  import Combine
7
+ import CustomNavigationStyle
7
8
 
8
9
 
9
10
  class ExpoMapboxNavigationView: ExpoView {
@@ -17,6 +18,8 @@ class ExpoMapboxNavigationView: ExpoView {
17
18
 
18
19
  let controller = ExpoMapboxNavigationViewController()
19
20
 
21
+ let customStyle = CustomNavigationStyle()
22
+
20
23
  required init(appContext: AppContext? = nil) {
21
24
  super.init(appContext: appContext)
22
25
  clipsToBounds = true
@@ -255,19 +258,23 @@ class ExpoMapboxNavigationViewController: UIViewController {
255
258
  }
256
259
 
257
260
  func setBottomBannerBackgroundColor(hexColor: String) {
258
- currentBottomBannerBackgroundColor = UIColor(hex: hexColor)
261
+ customStyle.bottomBannerBackgroundColor = UIColor(hex: hexColor)
262
+ update()
259
263
  }
260
264
 
261
265
  func setBottomBannerTimeRemainingTextColor(hexColor: String) {
262
266
  currentBottomBannerTimeRemainingTextColor = UIColor(hex: hexColor)
267
+ update()
263
268
  }
264
269
 
265
270
  func setBottomBannerDistanceRemainingTextColor(hexColor: String) {
266
271
  currentBottomBannerDistanceRemainingTextColor = UIColor(hex: hexColor)
272
+ update()
267
273
  }
268
274
 
269
275
  func setBottomBannerArrivalTimeTextColor(hexColor: String) {
270
276
  currentBottomBannerArrivalTimeTextColor = UIColor(hex: hexColor)
277
+ update()
271
278
  }
272
279
 
273
280
  func setInformationStackBackgroundColor(hexColor: String) {
@@ -287,37 +294,42 @@ class ExpoMapboxNavigationViewController: UIViewController {
287
294
 
288
295
  func setFloatingButtonsBackgroundColor(hexColor: String) {
289
296
  currentFloatingButtonsBackgroundColor = UIColor(hex: hexColor)
290
- // Apply color in onRoutesCalculated
297
+ update()
291
298
  }
292
299
 
293
300
  func setSpeedLimitBackgroundColor(hexColor: String) {
294
- currentSpeedLimitBackgroundColor = UIColor(hex: hexColor)
295
- // Apply color in onRoutesCalculated
301
+ customStyle.speedLimitBackgroundColor = UIColor(hex: hexColor)
302
+ update()
296
303
  }
297
304
 
298
305
  func setSpeedLimitTextColor(hexColor: String) {
299
- currentSpeedLimitTextColor = UIColor(hex: hexColor)
300
- // Apply color in onRoutesCalculated
306
+ customStyle.speedLimitTextColor = UIColor(hex: hexColor)
307
+ update()
301
308
  }
302
309
 
303
310
  func setWayNameViewBackgroundColor(hexColor: String) {
304
- currentWayNameViewBackgroundColor = UIColor(hex: hexColor)
305
- // Apply color in onRoutesCalculated
311
+ customStyle.wayNameBackgroundColor = UIColor(hex: hexColor)
312
+ update()
306
313
  }
307
314
 
308
315
  func setWayNameViewTextColor(hexColor: String) {
309
- currentWayNameViewTextColor = UIColor(hex: hexColor)
310
- // Apply color in onRoutesCalculated
316
+ customStyle.wayNameTextColor = UIColor(hex: hexColor)
317
+ update()
311
318
  }
312
319
 
313
320
  func setResumeButtonBackgroundColor(hexColor: String) {
314
321
  currentResumeButtonBackgroundColor = UIColor(hex: hexColor)
315
- // Apply color in onRoutesCalculated
322
+ update()
316
323
  }
317
324
 
318
325
  func setResumeButtonTextColor(hexColor: String) {
319
326
  currentResumeButtonTextColor = UIColor(hex: hexColor)
320
- // Apply color in onRoutesCalculated
327
+ update()
328
+ }
329
+
330
+ func setSpeedLimitBorderColor(hexColor: String) {
331
+ customStyle.speedLimitBorderColor = UIColor(hex: hexColor)
332
+ update()
321
333
  }
322
334
 
323
335
  func update(){
@@ -383,7 +395,7 @@ class ExpoMapboxNavigationViewController: UIViewController {
383
395
  onCancelNavigation?()
384
396
  }
385
397
 
386
- func onRoutesCalculated(navigationRoutes: NavigationRoutes){
398
+ func onRoutesCalculated(navigationRoutes: NavigationRoutes) {
387
399
  onRoutesLoaded?()
388
400
 
389
401
  let topBanner = TopBannerViewController()
@@ -425,6 +437,7 @@ class ExpoMapboxNavigationViewController: UIViewController {
425
437
  }
426
438
 
427
439
  let navigationOptions = NavigationOptions(
440
+ styles: [customStyle],
428
441
  mapboxNavigation: self.mapboxNavigation!,
429
442
  voiceController: ExpoMapboxNavigationViewController.navigationProvider.routeVoiceController,
430
443
  eventsManager: ExpoMapboxNavigationViewController.navigationProvider.eventsManager(),
@@ -484,19 +497,6 @@ class ExpoMapboxNavigationViewController: UIViewController {
484
497
  if let arrowColor = currentManeuverArrowColor {
485
498
  navigationMapView?.maneuverArrowColor = arrowColor
486
499
  }
487
-
488
- // Apply custom colors to UI elements
489
- if let backgroundColor = currentInformationStackBackgroundColor {
490
- // Apply to information stack background
491
- navigationViewController.navigationView.informationStackView?.backgroundColor = backgroundColor
492
- }
493
-
494
- if let textColor = currentInformationStackTextColor {
495
- // Apply to information stack text
496
- navigationViewController.navigationView.informationStackView?.tintColor = textColor
497
- }
498
-
499
- // Apply other custom colors similarly...
500
500
  }
501
501
  }
502
502
  extension ExpoMapboxNavigationViewController: NavigationViewControllerDelegate {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@complexify/expo-mapbox-navigation",
3
- "version": "1.0.9",
3
+ "version": "1.1.0",
4
4
  "description": "Expo module for Mapbox's Navigation SDK",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
@@ -1,4 +1,4 @@
1
- import { ViewStyle, StyleProp } from "react-native/types";
1
+ import { ViewStyle, StyleProp } from "react-native";
2
2
 
3
3
  type ProgressEvent = {
4
4
  distanceRemaining: number;
@@ -57,6 +57,7 @@ export type ExpoMapboxNavigationViewProps = {
57
57
  // Speed Limit View (5)
58
58
  speedLimitBackgroundColor?: string;
59
59
  speedLimitTextColor?: string;
60
+ speedLimitBorderColor?: string;
60
61
 
61
62
  // Floating Stack (6)
62
63
  floatingStackBackgroundColor?: string;