@complexify/expo-mapbox-navigation 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -1,19 +1,4 @@
 # Changelog
 
-## [1.0.0] - 2025-02-06
+## [1.0.2] - 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,15 @@ export type ExpoMapboxNavigationViewProps = {
     onUserOffRoute?: () => void;
     onRoutesLoaded?: () => void;
     style?: StyleProp<ViewStyle>;
+    topBannerBackgroundColor?: string;
+    topBannerPrimaryTextColor?: string;
+    topBannerSecondaryTextColor?: string;
+    topBannerDistanceTextColor?: string;
+    topBannerSeparatorColor?: string;
+    bottomBannerBackgroundColor?: string;
+    bottomBannerTimeRemainingTextColor?: string;
+    bottomBannerDistanceRemainingTextColor?: string;
+    bottomBannerArrivalTimeTextColor?: 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,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"}

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 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"]}

package/ios/ExpoMapboxNavigationModule.swift

@@ -83,6 +83,18 @@ 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)
+          }
+      }
     }
   }
 }

package/ios/ExpoMapboxNavigationView.swift

@@ -73,6 +73,9 @@ class ExpoMapboxNavigationViewController: UIViewController {
     var currentTraversedRouteColor: UIColor?
     var currentManeuverArrowColor: UIColor?
 
+    var topBannerBackgroundColor: UIColor?
+    var topBannerPrimaryTextColor: UIColor?
+
     init() {
         super.init(nibName: nil, bundle: nil)
         mapboxNavigation = ExpoMapboxNavigationViewController.navigationProvider.mapboxNavigation
@@ -212,6 +215,16 @@ class ExpoMapboxNavigationViewController: UIViewController {
         update()
     }
 
+    func setTopBannerBackgroundColor(hexColor: String) {
+        topBannerBackgroundColor = UIColor(hex: hexColor)
+        update()
+    }
+
+    func setTopBannerPrimaryTextColor(hexColor: String) {
+        topBannerPrimaryTextColor = UIColor(hex: hexColor)
+        update()
+    }
+
     func update(){
         calculateRoutesTask?.cancel()
 
@@ -279,8 +292,23 @@ class ExpoMapboxNavigationViewController: UIViewController {
         onRoutesLoaded?()
 
         let topBanner = TopBannerViewController()
-        topBanner.instructionsBannerView.distanceFormatter.locale = currentLocale
         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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@complexify/expo-mapbox-navigation",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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,17 @@ export type ExpoMapboxNavigationViewProps = {
   onUserOffRoute?: () => void;
   onRoutesLoaded?: () => void;
   style?: StyleProp<ViewStyle>;
+  
+  // Top banner colors
+  topBannerBackgroundColor?: string;
+  topBannerPrimaryTextColor?: string;
+  topBannerSecondaryTextColor?: string;
+  topBannerDistanceTextColor?: string;
+  topBannerSeparatorColor?: string;
+  
+  // Bottom banner colors
+  bottomBannerBackgroundColor?: string;
+  bottomBannerTimeRemainingTextColor?: string;
+  bottomBannerDistanceRemainingTextColor?: string;
+  bottomBannerArrivalTimeTextColor?: string;
 };