@complexify/expo-mapbox-navigation 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,19 +1,4 @@
 # Changelog
 
-## [1.0.0] - 2025-02-06
+## [1.0.3] - 2025-02-06
 
-### 🛠 Breaking changes
-
-### 🎉 New features
-- Added support for route color customization
-
-  - `routeColor`: Customize main route color
-  - `routeAlternateColor`: Customize alternate routes color
-  - `routeCasingColor`: Customize main route casing color
-  - `routeAlternateCasingColor`: Customize alternate routes casing color
-  - `traversedRouteColor`: Customize traversed route color
-  - `maneuverArrowColor`: Customize maneuver arrow color
-
-### 🐛 Bug fixes
-
-### 💡 Others

package/README.md

@@ -16,7 +16,7 @@ This package relies on the installtion of `@rnmapbox/maps`, so you'll have to in
 Run this command to add the package
 
 ```
-npx expo install @youssefhenna/expo-mapbox-navigation
+npx expo install @complexify/expo-mapbox-navigation
 ```
 
 ### Configure package
@@ -27,7 +27,7 @@ In your `app.json` or `app.js`, you'll need to add a plugin for the package unde
 "plugins": [
     ...other plugins
      [
-        "@youssefhenna/expo-mapbox-navigation",
+        "@complexify/expo-mapbox-navigation",
         {
           "accessToken": "<YOUR_TOKEN>",
           "mapboxMapsVersion": "<MAPBOX_MAPS_VERSION>"

package/build/ExpoMapboxNavigation.types.d.ts

@@ -35,6 +35,25 @@ export type ExpoMapboxNavigationViewProps = {
     onUserOffRoute?: () => void;
     onRoutesLoaded?: () => void;
     style?: StyleProp<ViewStyle>;
+    topBannerBackgroundColor?: string;
+    topBannerPrimaryTextColor?: string;
+    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;CAC9B,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"]}
+{"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

@@ -83,6 +83,125 @@ public class ExpoMapboxNavigationModule: Module {
               view.controller.setManeuverArrowColor(hexColor: hexColor)
           }
       }
+
+      Prop("topBannerBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              view.controller.setTopBannerBackgroundColor(hexColor: hexColor)
+          }
+      }
+
+      Prop("topBannerPrimaryTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
+          if let hexColor = color {
+              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

@@ -73,6 +73,28 @@ class ExpoMapboxNavigationViewController: UIViewController {
     var currentTraversedRouteColor: UIColor?
     var currentManeuverArrowColor: UIColor?
 
+    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)
         mapboxNavigation = ExpoMapboxNavigationViewController.navigationProvider.mapboxNavigation
@@ -212,6 +234,101 @@ class ExpoMapboxNavigationViewController: UIViewController {
         update()
     }
 
+    func setTopBannerBackgroundColor(hexColor: String) {
+        topBannerBackgroundColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setTopBannerPrimaryTextColor(hexColor: String) {
+        topBannerPrimaryTextColor = UIColor(hex: hexColor)
+        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()
 
@@ -278,11 +395,27 @@ class ExpoMapboxNavigationViewController: UIViewController {
     func onRoutesCalculated(navigationRoutes: NavigationRoutes){
         onRoutesLoaded?()
 
-        let topBanner = TopBannerViewController()
-        topBanner.instructionsBannerView.distanceFormatter.locale = currentLocale
-        let bottomBanner = BottomBannerViewController()
-        bottomBanner.distanceFormatter.locale = currentLocale
-        bottomBanner.dateFormatter.locale = currentLocale
+        let navigationViewController = NavigationViewController(
+            navigationRoutes: navigationRoutes,
+            navigationOptions: navigationOptions
+        )
+
+        // Customize top banner colors
+        let topBanner = navigationViewController.navigationView.topBannerContainerView
+        topBanner.backgroundColor = topBannerBackgroundColor ?? UIColor(hex: "#FFFFFF")
+        let instructionsView = navigationViewController.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 = navigationViewController.navigationView.bottomBannerContainerView
+        bottomBanner.backgroundColor = bottomBannerBackgroundColor ?? UIColor(hex: "#FFFFFF")
+        let bottomView = navigationViewController.navigationView.bottomBannerView
+        bottomView.timeRemainingLabel.textColor = bottomBannerTimeRemainingTextColor ?? UIColor(hex: "#000000")
+        bottomView.distanceRemainingLabel.textColor = bottomBannerDistanceRemainingTextColor ?? UIColor(hex: "#666666")
+        bottomView.arrivalTimeLabel.textColor = bottomBannerArrivalTimeTextColor ?? UIColor(hex: "#666666")
 
         let navigationOptions = NavigationOptions(
             mapboxNavigation: self.mapboxNavigation!,
@@ -292,11 +425,6 @@ class ExpoMapboxNavigationViewController: UIViewController {
             bottomBanner: bottomBanner
         )
 
-        let navigationViewController = NavigationViewController(
-            navigationRoutes: navigationRoutes,
-            navigationOptions: navigationOptions
-        )
-
         let navigationMapView = navigationViewController.navigationMapView
         navigationMapView!.puckType = .puck2D(.navigationDefault)
 
@@ -344,6 +472,41 @@ class ExpoMapboxNavigationViewController: UIViewController {
         if let arrowColor = currentManeuverArrowColor {
             navigationMapView?.maneuverArrowColor = arrowColor
         }
+
+        // 2. Information Stack
+        let infoStack = navigationViewController.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 = navigationViewController.navigationView.resumeButton
+        resumeButton.backgroundColor = resumeButtonBackgroundColor ?? UIColor(hex: "#FFFFFF")
+        resumeButton.setTitleColor(resumeButtonTextColor ?? UIColor(hex: "#000000"), for: .normal)
+
+        // 5. Speed Limit View
+        let speedLimitView = navigationViewController.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 = navigationViewController.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 = navigationViewController.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.1",
+  "version": "1.0.3",
   "description": "Expo module for Mapbox's Navigation SDK",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -23,28 +23,24 @@
     "@complexify/expo-mapbox-navigation",
     "ExpoMapboxNavigation"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/complexify/expo-mapbox-navigation.git"
-  },
+  "repository": "https://github.com/complexify/expo-mapbox-navigation",
   "bugs": {
     "url": "https://github.com/complexify/expo-mapbox-navigation/issues"
   },
   "author": "complexify",
   "license": "MIT",
   "homepage": "https://github.com/complexify/expo-mapbox-navigation#readme",
+  "dependencies": {},
   "devDependencies": {
-    "@expo/config-plugins": "~8.0.10",
     "@types/react": "^18.0.25",
-    "@types/react-native": "^0.72.8",
     "expo-module-scripts": "^3.5.2",
     "expo-modules-core": "~1.11.14",
-    "react-native": "^0.77.0"
+    "@expo/config-plugins": "~8.0.10"
   },
   "peerDependencies": {
-    "@rnmapbox/maps": "*",
     "expo": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "@rnmapbox/maps": "*"
   }
 }

package/src/ExpoMapboxNavigation.types.ts

@@ -32,4 +32,37 @@ export type ExpoMapboxNavigationViewProps = {
   onUserOffRoute?: () => void;
   onRoutesLoaded?: () => void;
   style?: StyleProp<ViewStyle>;
+  
+  // Top Banner (1)
+  topBannerBackgroundColor?: string;
+  topBannerPrimaryTextColor?: string;
+  topBannerSecondaryTextColor?: string;
+  topBannerDistanceTextColor?: string;
+  topBannerSeparatorColor?: string;
+
+  // 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;
 };