@complexify/expo-mapbox-navigation 1.0.9 → 1.1.1
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.
- package/build/ExpoMapboxNavigation.types.d.ts +2 -1
- package/build/ExpoMapboxNavigation.types.d.ts.map +1 -1
- package/build/ExpoMapboxNavigation.types.js.map +1 -1
- package/ios/CustomNavigationStyle.swift +48 -0
- package/ios/ExpoMapboxNavigationModule.swift +6 -0
- package/ios/ExpoMapboxNavigationView.swift +27 -26
- package/package.json +1 -1
- package/src/ExpoMapboxNavigation.types.ts +2 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ViewStyle, StyleProp } from "react-native
|
|
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,
|
|
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
|
|
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,48 @@
|
|
|
1
|
+
import Foundation
|
|
2
|
+
import MapboxMaps
|
|
3
|
+
import MapboxNavigationUIKit
|
|
4
|
+
import UIKit
|
|
5
|
+
|
|
6
|
+
class CustomDayStyle: StandardDayStyle {
|
|
7
|
+
var customSpeedLimitTextColor: UIColor?
|
|
8
|
+
var customSpeedLimitBackgroundColor: UIColor?
|
|
9
|
+
var customSpeedLimitBorderColor: UIColor?
|
|
10
|
+
var customBottomBannerBackgroundColor: UIColor?
|
|
11
|
+
var customWayNameTextColor: UIColor?
|
|
12
|
+
var customWayNameBackgroundColor: UIColor?
|
|
13
|
+
|
|
14
|
+
required init() {
|
|
15
|
+
super.init()
|
|
16
|
+
styleType = .day
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
override func apply() {
|
|
20
|
+
super.apply()
|
|
21
|
+
|
|
22
|
+
let traitCollection = UIScreen.main.traitCollection
|
|
23
|
+
|
|
24
|
+
// Speed limit customization
|
|
25
|
+
if let textColor = customSpeedLimitTextColor {
|
|
26
|
+
SpeedLimitView.appearance(for: traitCollection).textColor = textColor
|
|
27
|
+
}
|
|
28
|
+
if let bgColor = customSpeedLimitBackgroundColor {
|
|
29
|
+
SpeedLimitView.appearance(for: traitCollection).signBackColor = bgColor
|
|
30
|
+
}
|
|
31
|
+
if let borderColor = customSpeedLimitBorderColor {
|
|
32
|
+
SpeedLimitView.appearance(for: traitCollection).regulatoryBorderColor = borderColor
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Bottom banner customization
|
|
36
|
+
if let bottomBannerBg = customBottomBannerBackgroundColor {
|
|
37
|
+
BottomBannerView.appearance(for: traitCollection).backgroundColor = bottomBannerBg
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Way name customization
|
|
41
|
+
if let textColor = customWayNameTextColor {
|
|
42
|
+
WayNameView.appearance(for: traitCollection).textColor = textColor
|
|
43
|
+
}
|
|
44
|
+
if let bgColor = customWayNameBackgroundColor {
|
|
45
|
+
WayNameView.appearance(for: traitCollection).backgroundColor = bgColor.withAlphaComponent(0.8)
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -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,9 @@ class ExpoMapboxNavigationView: ExpoView {
|
|
|
17
18
|
|
|
18
19
|
let controller = ExpoMapboxNavigationViewController()
|
|
19
20
|
|
|
21
|
+
let customDayStyle = CustomDayStyle()
|
|
22
|
+
let customNightStyle = CustomNightStyle()
|
|
23
|
+
|
|
20
24
|
required init(appContext: AppContext? = nil) {
|
|
21
25
|
super.init(appContext: appContext)
|
|
22
26
|
clipsToBounds = true
|
|
@@ -255,19 +259,23 @@ class ExpoMapboxNavigationViewController: UIViewController {
|
|
|
255
259
|
}
|
|
256
260
|
|
|
257
261
|
func setBottomBannerBackgroundColor(hexColor: String) {
|
|
258
|
-
|
|
262
|
+
customDayStyle.customBottomBannerBackgroundColor = UIColor(hex: hexColor)
|
|
263
|
+
update()
|
|
259
264
|
}
|
|
260
265
|
|
|
261
266
|
func setBottomBannerTimeRemainingTextColor(hexColor: String) {
|
|
262
267
|
currentBottomBannerTimeRemainingTextColor = UIColor(hex: hexColor)
|
|
268
|
+
update()
|
|
263
269
|
}
|
|
264
270
|
|
|
265
271
|
func setBottomBannerDistanceRemainingTextColor(hexColor: String) {
|
|
266
272
|
currentBottomBannerDistanceRemainingTextColor = UIColor(hex: hexColor)
|
|
273
|
+
update()
|
|
267
274
|
}
|
|
268
275
|
|
|
269
276
|
func setBottomBannerArrivalTimeTextColor(hexColor: String) {
|
|
270
277
|
currentBottomBannerArrivalTimeTextColor = UIColor(hex: hexColor)
|
|
278
|
+
update()
|
|
271
279
|
}
|
|
272
280
|
|
|
273
281
|
func setInformationStackBackgroundColor(hexColor: String) {
|
|
@@ -287,37 +295,42 @@ class ExpoMapboxNavigationViewController: UIViewController {
|
|
|
287
295
|
|
|
288
296
|
func setFloatingButtonsBackgroundColor(hexColor: String) {
|
|
289
297
|
currentFloatingButtonsBackgroundColor = UIColor(hex: hexColor)
|
|
290
|
-
|
|
298
|
+
update()
|
|
291
299
|
}
|
|
292
300
|
|
|
293
301
|
func setSpeedLimitBackgroundColor(hexColor: String) {
|
|
294
|
-
|
|
295
|
-
|
|
302
|
+
customDayStyle.customSpeedLimitBackgroundColor = UIColor(hex: hexColor)
|
|
303
|
+
update()
|
|
296
304
|
}
|
|
297
305
|
|
|
298
306
|
func setSpeedLimitTextColor(hexColor: String) {
|
|
299
|
-
|
|
300
|
-
|
|
307
|
+
customDayStyle.customSpeedLimitTextColor = UIColor(hex: hexColor)
|
|
308
|
+
update()
|
|
301
309
|
}
|
|
302
310
|
|
|
303
311
|
func setWayNameViewBackgroundColor(hexColor: String) {
|
|
304
|
-
|
|
305
|
-
|
|
312
|
+
customDayStyle.customWayNameBackgroundColor = UIColor(hex: hexColor)
|
|
313
|
+
update()
|
|
306
314
|
}
|
|
307
315
|
|
|
308
316
|
func setWayNameViewTextColor(hexColor: String) {
|
|
309
|
-
|
|
310
|
-
|
|
317
|
+
customDayStyle.customWayNameTextColor = UIColor(hex: hexColor)
|
|
318
|
+
update()
|
|
311
319
|
}
|
|
312
320
|
|
|
313
321
|
func setResumeButtonBackgroundColor(hexColor: String) {
|
|
314
322
|
currentResumeButtonBackgroundColor = UIColor(hex: hexColor)
|
|
315
|
-
|
|
323
|
+
update()
|
|
316
324
|
}
|
|
317
325
|
|
|
318
326
|
func setResumeButtonTextColor(hexColor: String) {
|
|
319
327
|
currentResumeButtonTextColor = UIColor(hex: hexColor)
|
|
320
|
-
|
|
328
|
+
update()
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
func setSpeedLimitBorderColor(hexColor: String) {
|
|
332
|
+
customDayStyle.customSpeedLimitBorderColor = UIColor(hex: hexColor)
|
|
333
|
+
update()
|
|
321
334
|
}
|
|
322
335
|
|
|
323
336
|
func update(){
|
|
@@ -383,7 +396,7 @@ class ExpoMapboxNavigationViewController: UIViewController {
|
|
|
383
396
|
onCancelNavigation?()
|
|
384
397
|
}
|
|
385
398
|
|
|
386
|
-
func onRoutesCalculated(navigationRoutes: NavigationRoutes){
|
|
399
|
+
func onRoutesCalculated(navigationRoutes: NavigationRoutes) {
|
|
387
400
|
onRoutesLoaded?()
|
|
388
401
|
|
|
389
402
|
let topBanner = TopBannerViewController()
|
|
@@ -425,6 +438,7 @@ class ExpoMapboxNavigationViewController: UIViewController {
|
|
|
425
438
|
}
|
|
426
439
|
|
|
427
440
|
let navigationOptions = NavigationOptions(
|
|
441
|
+
styles: [customDayStyle, customNightStyle],
|
|
428
442
|
mapboxNavigation: self.mapboxNavigation!,
|
|
429
443
|
voiceController: ExpoMapboxNavigationViewController.navigationProvider.routeVoiceController,
|
|
430
444
|
eventsManager: ExpoMapboxNavigationViewController.navigationProvider.eventsManager(),
|
|
@@ -484,19 +498,6 @@ class ExpoMapboxNavigationViewController: UIViewController {
|
|
|
484
498
|
if let arrowColor = currentManeuverArrowColor {
|
|
485
499
|
navigationMapView?.maneuverArrowColor = arrowColor
|
|
486
500
|
}
|
|
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
501
|
}
|
|
501
502
|
}
|
|
502
503
|
extension ExpoMapboxNavigationViewController: NavigationViewControllerDelegate {
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ViewStyle, StyleProp } from "react-native
|
|
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;
|