@complexify/expo-mapbox-navigation 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -1,4 +1,4 @@
 # Changelog
 
-## [1.0.2] - 2025-02-06
+## [1.0.3] - 2025-02-06
 

package/build/ExpoMapboxNavigation.types.d.ts

@@ -40,10 +40,20 @@ export type ExpoMapboxNavigationViewProps = {
     topBannerSecondaryTextColor?: string;
     topBannerDistanceTextColor?: string;
     topBannerSeparatorColor?: string;
+    informationStackBackgroundColor?: string;
+    informationStackTextColor?: string;
     bottomBannerBackgroundColor?: string;
     bottomBannerTimeRemainingTextColor?: string;
     bottomBannerDistanceRemainingTextColor?: string;
     bottomBannerArrivalTimeTextColor?: string;
+    resumeButtonBackgroundColor?: string;
+    resumeButtonTextColor?: string;
+    speedLimitBackgroundColor?: string;
+    speedLimitTextColor?: string;
+    floatingStackBackgroundColor?: string;
+    floatingButtonsBackgroundColor?: string;
+    wayNameViewBackgroundColor?: string;
+    wayNameViewTextColor?: 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,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,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,kCAAkC,CAAC,EAAE,MAAM,CAAC;IAC5C,sCAAsC,CAAC,EAAE,MAAM,CAAC;IAChD,gCAAgC,CAAC,EAAE,MAAM,CAAC;CAC3C,CAAC"}
+{"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"}

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/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 colors\n  topBannerBackgroundColor?: string;\n  topBannerPrimaryTextColor?: string;\n  topBannerSecondaryTextColor?: string;\n  topBannerDistanceTextColor?: string;\n  topBannerSeparatorColor?: string;\n  \n  // Bottom banner colors\n  bottomBannerBackgroundColor?: string;\n  bottomBannerTimeRemainingTextColor?: string;\n  bottomBannerDistanceRemainingTextColor?: string;\n  bottomBannerArrivalTimeTextColor?: string;\n};\n"]}
+{"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"]}

package/ios/ExpoMapboxNavigationModule.swift

@@ -95,6 +95,113 @@ public class ExpoMapboxNavigationModule: Module {
               view.controller.setTopBannerPrimaryTextColor(hexColor: hexColor)
           }
       }
+
+      Prop("topBannerSecondaryTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setTopBannerSecondaryTextColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("topBannerDistanceTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setTopBannerDistanceTextColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("topBannerSeparatorColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setTopBannerSeparatorColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("bottomBannerBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setBottomBannerBackgroundColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("bottomBannerTimeRemainingTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setBottomBannerTimeRemainingTextColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("bottomBannerDistanceRemainingTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setBottomBannerDistanceRemainingTextColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("bottomBannerArrivalTimeTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setBottomBannerArrivalTimeTextColor(hexColor: hexColor)
+          }
+      }
+
+      // Information Stack
+      Prop("informationStackBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setInformationStackBackgroundColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("informationStackTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setInformationStackTextColor(hexColor: hexColor)
+          }
+      }
+
+      // Resume Button
+      Prop("resumeButtonBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setResumeButtonBackgroundColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("resumeButtonTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setResumeButtonTextColor(hexColor: hexColor)
+          }
+      }
+
+      // Speed Limit
+      Prop("speedLimitBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setSpeedLimitBackgroundColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("speedLimitTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setSpeedLimitTextColor(hexColor: hexColor)
+          }
+      }
+
+      // Floating Stack
+      Prop("floatingStackBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setFloatingStackBackgroundColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("floatingButtonsBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setFloatingButtonsBackgroundColor(hexColor: hexColor)
+          }
+      }
+
+      // Way Name View
+      Prop("wayNameViewBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setWayNameViewBackgroundColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("wayNameViewTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setWayNameViewTextColor(hexColor: hexColor)
+          }
+      }
     }
   }
 }

package/ios/ExpoMapboxNavigationView.swift

@@ -75,6 +75,25 @@ class ExpoMapboxNavigationViewController: UIViewController {
 
     var topBannerBackgroundColor: UIColor?
     var topBannerPrimaryTextColor: UIColor?
+    var topBannerSecondaryTextColor: UIColor?
+    var topBannerDistanceTextColor: UIColor?
+    var topBannerSeparatorColor: UIColor?
+
+    var bottomBannerBackgroundColor: UIColor?
+    var bottomBannerTimeRemainingTextColor: UIColor?
+    var bottomBannerDistanceRemainingTextColor: UIColor?
+    var bottomBannerArrivalTimeTextColor: UIColor?
+
+    var informationStackBackgroundColor: UIColor?
+    var informationStackTextColor: UIColor?
+    var resumeButtonBackgroundColor: UIColor?
+    var resumeButtonTextColor: UIColor?
+    var speedLimitBackgroundColor: UIColor?
+    var speedLimitTextColor: UIColor?
+    var floatingStackBackgroundColor: UIColor?
+    var floatingButtonsBackgroundColor: UIColor?
+    var wayNameViewBackgroundColor: UIColor?
+    var wayNameViewTextColor: UIColor?
 
     init() {
         super.init(nibName: nil, bundle: nil)
@@ -225,6 +244,91 @@ class ExpoMapboxNavigationViewController: UIViewController {
         update()
     }
 
+    func setTopBannerSecondaryTextColor(hexColor: String) {
+        topBannerSecondaryTextColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setTopBannerDistanceTextColor(hexColor: String) {
+        topBannerDistanceTextColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setTopBannerSeparatorColor(hexColor: String) {
+        topBannerSeparatorColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setBottomBannerBackgroundColor(hexColor: String) {
+        bottomBannerBackgroundColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setBottomBannerTimeRemainingTextColor(hexColor: String) {
+        bottomBannerTimeRemainingTextColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setBottomBannerDistanceRemainingTextColor(hexColor: String) {
+        bottomBannerDistanceRemainingTextColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setBottomBannerArrivalTimeTextColor(hexColor: String) {
+        bottomBannerArrivalTimeTextColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setInformationStackBackgroundColor(hexColor: String) {
+        informationStackBackgroundColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setInformationStackTextColor(hexColor: String) {
+        informationStackTextColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setResumeButtonBackgroundColor(hexColor: String) {
+        resumeButtonBackgroundColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setResumeButtonTextColor(hexColor: String) {
+        resumeButtonTextColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setSpeedLimitBackgroundColor(hexColor: String) {
+        speedLimitBackgroundColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setSpeedLimitTextColor(hexColor: String) {
+        speedLimitTextColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setFloatingStackBackgroundColor(hexColor: String) {
+        floatingStackBackgroundColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setFloatingButtonsBackgroundColor(hexColor: String) {
+        floatingButtonsBackgroundColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setWayNameViewBackgroundColor(hexColor: String) {
+        wayNameViewBackgroundColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setWayNameViewTextColor(hexColor: String) {
+        wayNameViewTextColor = UIColor(hex: hexColor)
+        update()
+    }
+
     func update(){
         calculateRoutesTask?.cancel()
 
@@ -291,54 +395,51 @@ class ExpoMapboxNavigationViewController: UIViewController {
     func onRoutesCalculated(navigationRoutes: NavigationRoutes){
         onRoutesLoaded?()
 
-        let topBanner = TopBannerViewController()
-        let bottomBanner = BottomBannerViewController()
-        
-        // Customize top banner colors
-        topBanner.backgroundColor = topBannerBackgroundColor ?? UIColor(hex: "#FFFFFF") // Background color
-        topBanner.instructionsBannerView.primaryLabel.textColor = topBannerPrimaryTextColor ?? UIColor(hex: "#000000") // Primary instruction text
-        topBanner.instructionsBannerView.secondaryLabel.textColor = UIColor(hex: "#666666") // Secondary instruction text
-        topBanner.instructionsBannerView.distanceLabel.textColor = UIColor(hex: "#666666") // Distance text
-        topBanner.instructionsBannerView.separatorView.backgroundColor = UIColor(hex: "#EEEEEE") // Separator line
-        
-        // Customize bottom banner colors
-        bottomBanner.backgroundColor = UIColor(hex: "#FFFFFF") // Background color
-        bottomBanner.timeRemainingLabel.textColor = UIColor(hex: "#000000") // Time remaining text
-        bottomBanner.distanceRemainingLabel.textColor = UIColor(hex: "#666666") // Distance remaining text
-        bottomBanner.arrivalTimeLabel.textColor = UIColor(hex: "#666666") // Arrival time text
-        
-        // Set locale formatters
-        topBanner.instructionsBannerView.distanceFormatter.locale = currentLocale
-        bottomBanner.distanceFormatter.locale = currentLocale
-        bottomBanner.dateFormatter.locale = currentLocale
-
-        let navigationOptions = NavigationOptions(
-            mapboxNavigation: self.mapboxNavigation!,
-            voiceController: ExpoMapboxNavigationViewController.navigationProvider.routeVoiceController,
-            eventsManager: ExpoMapboxNavigationViewController.navigationProvider.eventsManager(),
-            topBanner: topBanner,
-            bottomBanner: bottomBanner
-        )
-
         let navigationViewController = NavigationViewController(
             navigationRoutes: navigationRoutes,
-            navigationOptions: navigationOptions
+            navigationOptions: NavigationOptions(
+                styles: [.dayStyle],
+                navigationMapView: nil,
+                voiceController: ExpoMapboxNavigationViewController.navigationProvider.routeVoiceController,
+                eventsManager: ExpoMapboxNavigationViewController.navigationProvider.eventsManager()
+            )
         )
 
-        let navigationMapView = navigationViewController.navigationMapView
-        navigationMapView!.puckType = .puck2D(.navigationDefault)
+        let navigationView = navigationViewController.navigationView
 
-        let style = currentMapStyle != nil ? StyleURI(rawValue: currentMapStyle!) : StyleURI.streets
-        navigationMapView!.mapView.mapboxMap.loadStyle(style!, completion: { _ in
-            navigationMapView!.localizeLabels(locale: self.currentLocale)
-            do{
-                try navigationMapView!.mapView.mapboxMap.localizeLabels(into: self.currentLocale)
-            } catch {}
-        })
- 
+        // Customize top banner colors
+        let topBanner = navigationView.topBannerContainerView
+        topBanner.backgroundColor = topBannerBackgroundColor ?? UIColor(hex: "#FFFFFF")
+        let instructionsView = navigationView.instructionsBannerView
+        instructionsView.primaryLabel.textColor = topBannerPrimaryTextColor ?? UIColor(hex: "#000000")
+        instructionsView.secondaryLabel.textColor = topBannerSecondaryTextColor ?? UIColor(hex: "#666666")
+        instructionsView.distanceLabel.textColor = topBannerDistanceTextColor ?? UIColor(hex: "#666666")
+        instructionsView.separatorView.backgroundColor = topBannerSeparatorColor ?? UIColor(hex: "#EEEEEE")
+        
+        // Customize bottom banner colors
+        let bottomBanner = navigationView.bottomBannerContainerView
+        bottomBanner.backgroundColor = bottomBannerBackgroundColor ?? UIColor(hex: "#FFFFFF")
+        let bottomView = navigationView.bottomBannerView
+        bottomView.timeRemainingLabel.textColor = bottomBannerTimeRemainingTextColor ?? UIColor(hex: "#000000")
+        bottomView.distanceRemainingLabel.textColor = bottomBannerDistanceRemainingTextColor ?? UIColor(hex: "#666666")
+        bottomView.arrivalTimeLabel.textColor = bottomBannerArrivalTimeTextColor ?? UIColor(hex: "#666666")
+
+        let navigationMapView = navigationView.navigationMapView
+        navigationMapView?.puckConfiguration = .puck2D()
+
+        if let style = currentMapStyle {
+            navigationMapView?.mapView.mapboxMap.loadStyle(StyleURI(rawValue: style)) { _ in
+                navigationMapView?.localizeLabels(locale: self.currentLocale)
+                do {
+                    try navigationMapView?.mapView.mapboxMap.localizeLabels(into: self.currentLocale)
+                } catch {
+                    print("Failed to localize map labels: \(error)")
+                }
+            }
+        }
 
-        let cancelButton = navigationViewController.navigationView.bottomBannerContainerView.findViews(subclassOf: CancelButton.self)[0]
-        cancelButton.addTarget(self, action: #selector(cancelButtonClicked), for: .touchUpInside)
+        let cancelButton = navigationView.bottomBannerContainerView.findViews(subclassOf: CancelButton.self).first
+        cancelButton?.addTarget(self, action: #selector(cancelButtonClicked), for: UIControl.Event.touchUpInside)
 
         navigationViewController.delegate = self
         addChild(navigationViewController)
@@ -350,9 +451,9 @@ class ExpoMapboxNavigationViewController: UIViewController {
             navigationViewController.view.topAnchor.constraint(equalTo: view.topAnchor, constant: 0),
             navigationViewController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0),
         ])
-        didMove(toParent: self)
+        navigationViewController.didMove(toParent: self)
         mapboxNavigation!.tripSession().startActiveGuidance(with: navigationRoutes, startLegIndex: 0)
-    
+        
         // Apply custom colors if set
         if let routeColor = currentRouteColor {
             navigationMapView?.routeColor = routeColor
@@ -372,6 +473,41 @@ class ExpoMapboxNavigationViewController: UIViewController {
         if let arrowColor = currentManeuverArrowColor {
             navigationMapView?.maneuverArrowColor = arrowColor
         }
+
+        // 2. Information Stack
+        let infoStack = navigationView.informationStackView
+        infoStack.backgroundColor = informationStackBackgroundColor ?? UIColor(hex: "#FFFFFF")
+        for view in infoStack.arrangedSubviews {
+            if let label = view as? UILabel {
+                label.textColor = informationStackTextColor ?? UIColor(hex: "#000000")
+            }
+        }
+
+        // 4. Resume Button
+        let resumeButton = navigationView.resumeButton
+        resumeButton.backgroundColor = resumeButtonBackgroundColor ?? UIColor(hex: "#FFFFFF")
+        resumeButton.setTitleColor(resumeButtonTextColor ?? UIColor(hex: "#000000"), for: UIControl.State.normal)
+
+        // 5. Speed Limit View
+        let speedLimitView = navigationView.speedLimitView
+        speedLimitView.backgroundColor = speedLimitBackgroundColor ?? UIColor(hex: "#FFFFFF")
+        if let speedLabel = speedLimitView.subviews.first as? UILabel {
+            speedLabel.textColor = speedLimitTextColor ?? UIColor(hex: "#000000")
+        }
+
+        // 6. Floating Stack
+        let floatingStack = navigationView.floatingStackView
+        floatingStack.backgroundColor = floatingStackBackgroundColor ?? UIColor(hex: "#FFFFFF")
+        for button in floatingStack.arrangedSubviews {
+            if let floatingButton = button as? UIButton {
+                floatingButton.backgroundColor = floatingButtonsBackgroundColor ?? UIColor(hex: "#FFFFFF")
+            }
+        }
+
+        // 8. Way Name Label
+        let wayNameView = navigationView.wayNameView
+        wayNameView.backgroundColor = wayNameViewBackgroundColor ?? UIColor(hex: "#FFFFFF")
+        wayNameView.label.textColor = wayNameViewTextColor ?? UIColor(hex: "#000000")
     }
 }
 extension ExpoMapboxNavigationViewController: NavigationViewControllerDelegate {

package/package.json

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

package/src/ExpoMapboxNavigation.types.ts

@@ -33,16 +33,36 @@ export type ExpoMapboxNavigationViewProps = {
   onRoutesLoaded?: () => void;
   style?: StyleProp<ViewStyle>;
   
-  // Top banner colors
+  // Top Banner (1)
   topBannerBackgroundColor?: string;
   topBannerPrimaryTextColor?: string;
   topBannerSecondaryTextColor?: string;
   topBannerDistanceTextColor?: string;
   topBannerSeparatorColor?: string;
-  
-  // Bottom banner colors
+
+  // Information Stack (2)
+  informationStackBackgroundColor?: string;
+  informationStackTextColor?: string;
+
+  // Bottom Banner (3)
   bottomBannerBackgroundColor?: string;
   bottomBannerTimeRemainingTextColor?: string;
   bottomBannerDistanceRemainingTextColor?: string;
   bottomBannerArrivalTimeTextColor?: string;
+
+  // Resume Button (4)
+  resumeButtonBackgroundColor?: string;
+  resumeButtonTextColor?: string;
+
+  // Speed Limit View (5)
+  speedLimitBackgroundColor?: string;
+  speedLimitTextColor?: string;
+
+  // Floating Stack (6)
+  floatingStackBackgroundColor?: string;
+  floatingButtonsBackgroundColor?: string;
+
+  // Way Name Label (8)
+  wayNameViewBackgroundColor?: string;
+  wayNameViewTextColor?: string;
 };