@complexify/expo-mapbox-navigation 1.0.8 → 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.
- 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 +44 -0
- package/ios/ExpoMapboxNavigationModule.swift +66 -0
- package/ios/ExpoMapboxNavigationView.swift +76 -2
- package/package.json +1 -1
- package/src/ExpoMapboxNavigation.types.ts +3 -2
@@ -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,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
|
+
}
|
@@ -137,6 +137,72 @@ public class ExpoMapboxNavigationModule: Module {
|
|
137
137
|
view.controller.setBottomBannerArrivalTimeTextColor(hexColor: hexColor)
|
138
138
|
}
|
139
139
|
}
|
140
|
+
|
141
|
+
Prop("informationStackBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
|
142
|
+
if let hexColor = color {
|
143
|
+
view.controller.setInformationStackBackgroundColor(hexColor: hexColor)
|
144
|
+
}
|
145
|
+
}
|
146
|
+
|
147
|
+
Prop("informationStackTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
|
148
|
+
if let hexColor = color {
|
149
|
+
view.controller.setInformationStackTextColor(hexColor: hexColor)
|
150
|
+
}
|
151
|
+
}
|
152
|
+
|
153
|
+
Prop("floatingStackBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
|
154
|
+
if let hexColor = color {
|
155
|
+
view.controller.setFloatingStackBackgroundColor(hexColor: hexColor)
|
156
|
+
}
|
157
|
+
}
|
158
|
+
|
159
|
+
Prop("floatingButtonsBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
|
160
|
+
if let hexColor = color {
|
161
|
+
view.controller.setFloatingButtonsBackgroundColor(hexColor: hexColor)
|
162
|
+
}
|
163
|
+
}
|
164
|
+
|
165
|
+
Prop("speedLimitBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
|
166
|
+
if let hexColor = color {
|
167
|
+
view.controller.setSpeedLimitBackgroundColor(hexColor: hexColor)
|
168
|
+
}
|
169
|
+
}
|
170
|
+
|
171
|
+
Prop("speedLimitTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
|
172
|
+
if let hexColor = color {
|
173
|
+
view.controller.setSpeedLimitTextColor(hexColor: hexColor)
|
174
|
+
}
|
175
|
+
}
|
176
|
+
|
177
|
+
Prop("wayNameViewBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
|
178
|
+
if let hexColor = color {
|
179
|
+
view.controller.setWayNameViewBackgroundColor(hexColor: hexColor)
|
180
|
+
}
|
181
|
+
}
|
182
|
+
|
183
|
+
Prop("wayNameViewTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
|
184
|
+
if let hexColor = color {
|
185
|
+
view.controller.setWayNameViewTextColor(hexColor: hexColor)
|
186
|
+
}
|
187
|
+
}
|
188
|
+
|
189
|
+
Prop("resumeButtonBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
|
190
|
+
if let hexColor = color {
|
191
|
+
view.controller.setResumeButtonBackgroundColor(hexColor: hexColor)
|
192
|
+
}
|
193
|
+
}
|
194
|
+
|
195
|
+
Prop("resumeButtonTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
|
196
|
+
if let hexColor = color {
|
197
|
+
view.controller.setResumeButtonTextColor(hexColor: hexColor)
|
198
|
+
}
|
199
|
+
}
|
200
|
+
|
201
|
+
Prop("speedLimitBorderColor") { (view: ExpoMapboxNavigationView, color: String?) in
|
202
|
+
if let hexColor = color {
|
203
|
+
view.controller.setSpeedLimitBorderColor(hexColor: hexColor)
|
204
|
+
}
|
205
|
+
}
|
140
206
|
}
|
141
207
|
}
|
142
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
|
@@ -84,6 +87,17 @@ class ExpoMapboxNavigationViewController: UIViewController {
|
|
84
87
|
var currentBottomBannerDistanceRemainingTextColor: UIColor?
|
85
88
|
var currentBottomBannerArrivalTimeTextColor: UIColor?
|
86
89
|
|
90
|
+
var currentInformationStackBackgroundColor: UIColor?
|
91
|
+
var currentInformationStackTextColor: UIColor?
|
92
|
+
var currentFloatingStackBackgroundColor: UIColor?
|
93
|
+
var currentFloatingButtonsBackgroundColor: UIColor?
|
94
|
+
var currentSpeedLimitBackgroundColor: UIColor?
|
95
|
+
var currentSpeedLimitTextColor: UIColor?
|
96
|
+
var currentWayNameViewBackgroundColor: UIColor?
|
97
|
+
var currentWayNameViewTextColor: UIColor?
|
98
|
+
var currentResumeButtonBackgroundColor: UIColor?
|
99
|
+
var currentResumeButtonTextColor: UIColor?
|
100
|
+
|
87
101
|
init() {
|
88
102
|
super.init(nibName: nil, bundle: nil)
|
89
103
|
mapboxNavigation = ExpoMapboxNavigationViewController.navigationProvider.mapboxNavigation
|
@@ -244,19 +258,78 @@ class ExpoMapboxNavigationViewController: UIViewController {
|
|
244
258
|
}
|
245
259
|
|
246
260
|
func setBottomBannerBackgroundColor(hexColor: String) {
|
247
|
-
|
261
|
+
customStyle.bottomBannerBackgroundColor = UIColor(hex: hexColor)
|
262
|
+
update()
|
248
263
|
}
|
249
264
|
|
250
265
|
func setBottomBannerTimeRemainingTextColor(hexColor: String) {
|
251
266
|
currentBottomBannerTimeRemainingTextColor = UIColor(hex: hexColor)
|
267
|
+
update()
|
252
268
|
}
|
253
269
|
|
254
270
|
func setBottomBannerDistanceRemainingTextColor(hexColor: String) {
|
255
271
|
currentBottomBannerDistanceRemainingTextColor = UIColor(hex: hexColor)
|
272
|
+
update()
|
256
273
|
}
|
257
274
|
|
258
275
|
func setBottomBannerArrivalTimeTextColor(hexColor: String) {
|
259
276
|
currentBottomBannerArrivalTimeTextColor = UIColor(hex: hexColor)
|
277
|
+
update()
|
278
|
+
}
|
279
|
+
|
280
|
+
func setInformationStackBackgroundColor(hexColor: String) {
|
281
|
+
currentInformationStackBackgroundColor = UIColor(hex: hexColor)
|
282
|
+
// Apply color in onRoutesCalculated
|
283
|
+
}
|
284
|
+
|
285
|
+
func setInformationStackTextColor(hexColor: String) {
|
286
|
+
currentInformationStackTextColor = UIColor(hex: hexColor)
|
287
|
+
// Apply color in onRoutesCalculated
|
288
|
+
}
|
289
|
+
|
290
|
+
func setFloatingStackBackgroundColor(hexColor: String) {
|
291
|
+
currentFloatingStackBackgroundColor = UIColor(hex: hexColor)
|
292
|
+
// Apply color in onRoutesCalculated
|
293
|
+
}
|
294
|
+
|
295
|
+
func setFloatingButtonsBackgroundColor(hexColor: String) {
|
296
|
+
currentFloatingButtonsBackgroundColor = UIColor(hex: hexColor)
|
297
|
+
update()
|
298
|
+
}
|
299
|
+
|
300
|
+
func setSpeedLimitBackgroundColor(hexColor: String) {
|
301
|
+
customStyle.speedLimitBackgroundColor = UIColor(hex: hexColor)
|
302
|
+
update()
|
303
|
+
}
|
304
|
+
|
305
|
+
func setSpeedLimitTextColor(hexColor: String) {
|
306
|
+
customStyle.speedLimitTextColor = UIColor(hex: hexColor)
|
307
|
+
update()
|
308
|
+
}
|
309
|
+
|
310
|
+
func setWayNameViewBackgroundColor(hexColor: String) {
|
311
|
+
customStyle.wayNameBackgroundColor = UIColor(hex: hexColor)
|
312
|
+
update()
|
313
|
+
}
|
314
|
+
|
315
|
+
func setWayNameViewTextColor(hexColor: String) {
|
316
|
+
customStyle.wayNameTextColor = UIColor(hex: hexColor)
|
317
|
+
update()
|
318
|
+
}
|
319
|
+
|
320
|
+
func setResumeButtonBackgroundColor(hexColor: String) {
|
321
|
+
currentResumeButtonBackgroundColor = UIColor(hex: hexColor)
|
322
|
+
update()
|
323
|
+
}
|
324
|
+
|
325
|
+
func setResumeButtonTextColor(hexColor: String) {
|
326
|
+
currentResumeButtonTextColor = UIColor(hex: hexColor)
|
327
|
+
update()
|
328
|
+
}
|
329
|
+
|
330
|
+
func setSpeedLimitBorderColor(hexColor: String) {
|
331
|
+
customStyle.speedLimitBorderColor = UIColor(hex: hexColor)
|
332
|
+
update()
|
260
333
|
}
|
261
334
|
|
262
335
|
func update(){
|
@@ -322,7 +395,7 @@ class ExpoMapboxNavigationViewController: UIViewController {
|
|
322
395
|
onCancelNavigation?()
|
323
396
|
}
|
324
397
|
|
325
|
-
func onRoutesCalculated(navigationRoutes: NavigationRoutes){
|
398
|
+
func onRoutesCalculated(navigationRoutes: NavigationRoutes) {
|
326
399
|
onRoutesLoaded?()
|
327
400
|
|
328
401
|
let topBanner = TopBannerViewController()
|
@@ -364,6 +437,7 @@ class ExpoMapboxNavigationViewController: UIViewController {
|
|
364
437
|
}
|
365
438
|
|
366
439
|
let navigationOptions = NavigationOptions(
|
440
|
+
styles: [customStyle],
|
367
441
|
mapboxNavigation: self.mapboxNavigation!,
|
368
442
|
voiceController: ExpoMapboxNavigationViewController.navigationProvider.routeVoiceController,
|
369
443
|
eventsManager: ExpoMapboxNavigationViewController.navigationProvider.eventsManager(),
|
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;
|
@@ -32,7 +32,7 @@ export type ExpoMapboxNavigationViewProps = {
|
|
32
32
|
onUserOffRoute?: () => void;
|
33
33
|
onRoutesLoaded?: () => void;
|
34
34
|
style?: StyleProp<ViewStyle>;
|
35
|
-
|
35
|
+
|
36
36
|
// Top Banner (1)
|
37
37
|
topBannerBackgroundColor?: string;
|
38
38
|
topBannerPrimaryTextColor?: string;
|
@@ -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;
|