@baeckerherz/expo-mapbox-navigation 0.1.0

package/ios/ExpoMapboxNavigationView.swift

@@ -0,0 +1,377 @@
+import ExpoModulesCore
+import UIKit
+import CoreLocation
+import MapboxNavigationUIKit
+import MapboxNavigationCore
+import MapboxDirections
+import MapboxMaps
+
+// MARK: - Custom Style that applies React Native color overrides
+
+class CustomDayStyle: StandardDayStyle {
+  var customMapStyleURL: URL?
+  var customAccentColor: UIColor?
+  var customRouteColor: UIColor?
+  var customBannerBackgroundColor: UIColor?
+  var customBannerTextColor: UIColor?
+
+  override func apply() {
+    super.apply()
+
+    if let url = customMapStyleURL {
+      mapStyleURL = url
+      previewMapStyleURL = url
+    }
+
+    let tc = UITraitCollection(userInterfaceIdiom: .phone)
+
+    if let accent = customAccentColor {
+      tintColor = accent
+      FloatingButton.appearance(for: tc).tintColor = accent
+    }
+
+    if let bannerBg = customBannerBackgroundColor {
+      TopBannerView.appearance(for: tc).backgroundColor = bannerBg
+      InstructionsBannerView.appearance(for: tc).backgroundColor = bannerBg
+    }
+
+    if let bannerText = customBannerTextColor {
+      PrimaryLabel.appearance(for: tc, whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor = bannerText
+      SecondaryLabel.appearance(for: tc, whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor = bannerText
+      DistanceLabel.appearance(for: tc, whenContainedInInstancesOf: [InstructionsBannerView.self]).valueTextColor = bannerText
+      DistanceLabel.appearance(for: tc, whenContainedInInstancesOf: [InstructionsBannerView.self]).unitTextColor = bannerText.withAlphaComponent(0.7)
+    }
+
+    if let route = customRouteColor ?? customAccentColor {
+      Task { @MainActor in
+        NavigationMapView.appearance(for: tc).routeCasingColor = route.withAlphaComponent(0.8)
+      }
+    }
+  }
+}
+
+class CustomNightStyle: StandardNightStyle {
+  var customMapStyleURL: URL?
+  var customAccentColor: UIColor?
+  var customRouteColor: UIColor?
+  var customBannerBackgroundColor: UIColor?
+  var customBannerTextColor: UIColor?
+
+  override func apply() {
+    super.apply()
+
+    if let url = customMapStyleURL {
+      mapStyleURL = url
+      previewMapStyleURL = url
+    }
+
+    let tc = UITraitCollection(userInterfaceIdiom: .phone)
+
+    if let accent = customAccentColor {
+      tintColor = accent
+      FloatingButton.appearance(for: tc).tintColor = accent
+    }
+
+    if let bannerBg = customBannerBackgroundColor {
+      TopBannerView.appearance(for: tc).backgroundColor = bannerBg
+      InstructionsBannerView.appearance(for: tc).backgroundColor = bannerBg
+    }
+
+    if let bannerText = customBannerTextColor {
+      PrimaryLabel.appearance(for: tc, whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor = bannerText
+      SecondaryLabel.appearance(for: tc, whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor = bannerText
+      DistanceLabel.appearance(for: tc, whenContainedInInstancesOf: [InstructionsBannerView.self]).valueTextColor = bannerText
+      DistanceLabel.appearance(for: tc, whenContainedInInstancesOf: [InstructionsBannerView.self]).unitTextColor = bannerText.withAlphaComponent(0.7)
+    }
+
+    if let route = customRouteColor ?? customAccentColor {
+      Task { @MainActor in
+        NavigationMapView.appearance(for: tc).routeCasingColor = route.withAlphaComponent(0.8)
+      }
+    }
+  }
+}
+
+// MARK: - Hex color parsing
+
+extension UIColor {
+  convenience init?(hex: String) {
+    var hexSanitized = hex.trimmingCharacters(in: .whitespacesAndNewlines)
+    hexSanitized = hexSanitized.replacingOccurrences(of: "#", with: "")
+    guard hexSanitized.count == 6, let rgb = UInt64(hexSanitized, radix: 16) else {
+      return nil
+    }
+    self.init(
+      red: CGFloat((rgb >> 16) & 0xFF) / 255.0,
+      green: CGFloat((rgb >> 8) & 0xFF) / 255.0,
+      blue: CGFloat(rgb & 0xFF) / 255.0,
+      alpha: 1.0
+    )
+  }
+}
+
+// MARK: - ExpoMapboxNavigationView
+
+class ExpoMapboxNavigationView: ExpoView {
+
+  // MARK: Event dispatchers
+
+  let onRouteProgressChanged = EventDispatcher()
+  let onCancelNavigation = EventDispatcher()
+  let onWaypointArrival = EventDispatcher()
+  let onFinalDestinationArrival = EventDispatcher()
+  let onRouteChanged = EventDispatcher()
+  let onUserOffRoute = EventDispatcher()
+  let onError = EventDispatcher()
+
+  // MARK: Route configuration
+
+  private var coordinates: [CLLocationCoordinate2D] = []
+  var waypointIndices: [Int]?
+  var navigationLocale: String?
+  var routeProfile: String?
+  var isMuted: Bool = false
+
+  // MARK: Appearance configuration
+
+  var mapStyleURL: String?
+  var themeMode: String?
+  var accentColorHex: String?
+  var routeColorHex: String?
+  var bannerBackgroundColorHex: String?
+  var bannerTextColorHex: String?
+
+  // MARK: Navigation state
+
+  private var navigationViewController: NavigationViewController?
+  private var hasStartedNavigation = false
+
+  // MARK: Init
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    clipsToBounds = true
+  }
+
+  // MARK: Props
+
+  func setCoordinates(_ raw: [[String: Double]]) {
+    coordinates = raw.compactMap { dict in
+      guard let lat = dict["latitude"], let lng = dict["longitude"] else {
+        return nil
+      }
+      return CLLocationCoordinate2D(latitude: lat, longitude: lng)
+    }
+    startNavigationIfReady()
+  }
+
+  // MARK: Layout
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    navigationViewController?.view.frame = bounds
+  }
+
+  // MARK: Style builder
+
+  private func buildStyles() -> [Style] {
+    let accentColor = accentColorHex.flatMap { UIColor(hex: $0) }
+    let routeColor = routeColorHex.flatMap { UIColor(hex: $0) }
+    let bannerBg = bannerBackgroundColorHex.flatMap { UIColor(hex: $0) }
+    let bannerText = bannerTextColorHex.flatMap { UIColor(hex: $0) }
+    let customURL = mapStyleURL.flatMap { URL(string: $0) }
+
+    let dayStyle = CustomDayStyle()
+    dayStyle.customMapStyleURL = customURL
+    dayStyle.customAccentColor = accentColor
+    dayStyle.customRouteColor = routeColor
+    dayStyle.customBannerBackgroundColor = bannerBg
+    dayStyle.customBannerTextColor = bannerText
+
+    let nightStyle = CustomNightStyle()
+    nightStyle.customMapStyleURL = customURL
+    nightStyle.customAccentColor = accentColor
+    nightStyle.customRouteColor = routeColor
+    nightStyle.customBannerBackgroundColor = bannerBg
+    nightStyle.customBannerTextColor = bannerText
+
+    switch themeMode {
+    case "night":
+      return [nightStyle]
+    case "day":
+      return [dayStyle]
+    default:
+      // "auto" or nil -- provide both for automatic day/night switching
+      return [dayStyle, nightStyle]
+    }
+  }
+
+  // MARK: Navigation lifecycle
+
+  private func startNavigationIfReady() {
+    guard coordinates.count >= 2, !hasStartedNavigation else { return }
+    guard bounds.width > 0 else {
+      DispatchQueue.main.async { [weak self] in
+        self?.setNeedsLayout()
+        self?.layoutIfNeeded()
+        self?.startNavigationIfReady()
+      }
+      return
+    }
+
+    hasStartedNavigation = true
+
+    // Build waypoints
+    let waypoints = coordinates.enumerated().map { index, coord -> Waypoint in
+      var wp = Waypoint(coordinate: coord)
+      if let indices = waypointIndices {
+        wp.separatesLegs = indices.contains(index)
+      }
+      return wp
+    }
+
+    // Locale and measurement system
+    let resolvedLocale: Locale = {
+      if let code = navigationLocale {
+        return Locale(identifier: code)
+      }
+      return Locale.current
+    }()
+    let useMetric = !resolvedLocale.identifier.hasPrefix("en_US")
+
+    // Route options
+    var routeOptions = NavigationRouteOptions(waypoints: waypoints)
+    routeOptions.locale = resolvedLocale
+    routeOptions.distanceMeasurementSystem = useMetric ? .metric : .imperial
+
+    if let profile = routeProfile {
+      routeOptions.profileIdentifier = MapboxDirections.ProfileIdentifier(rawValue: profile)
+    }
+
+    // Core config
+    var coreConfig = CoreConfig()
+    coreConfig.locale = resolvedLocale
+    coreConfig.unitOfMeasurement = useMetric ? .metric : .imperial
+
+    let provider = MapboxNavigationProvider(coreConfig: coreConfig)
+    let mapboxNavigation = provider.mapboxNavigation
+
+    Task { @MainActor in
+      do {
+        let result = try await mapboxNavigation.routingProvider().calculateRoutes(
+          options: routeOptions
+        ).value
+
+        let navOptions = NavigationOptions(
+          mapboxNavigation: mapboxNavigation,
+          voiceController: provider.routeVoiceController,
+          eventsManager: provider.eventsManager(),
+          styles: self.buildStyles()
+        )
+
+        let navVC = NavigationViewController(
+          navigationRoutes: result,
+          navigationOptions: navOptions
+        )
+        navVC.delegate = self
+
+        // Apply mute setting
+        if self.isMuted {
+          provider.routeVoiceController.speechSynthesizer.muted = true
+        }
+
+        // Embed navigation view
+        navVC.view.frame = self.bounds
+        navVC.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        self.addSubview(navVC.view)
+        self.navigationViewController = navVC
+
+        if let parentVC = self.findViewController() {
+          parentVC.addChild(navVC)
+          navVC.didMove(toParent: parentVC)
+        }
+      } catch {
+        self.onError(["message": "Failed to calculate route: \(error.localizedDescription)"])
+      }
+    }
+  }
+
+  private func findViewController() -> UIViewController? {
+    var responder: UIResponder? = self
+    while let next = responder?.next {
+      if let vc = next as? UIViewController { return vc }
+      responder = next
+    }
+    return nil
+  }
+
+  // MARK: Cleanup
+
+  deinit {
+    navigationViewController?.willMove(toParent: nil)
+    navigationViewController?.view.removeFromSuperview()
+    navigationViewController?.removeFromParent()
+  }
+}
+
+// MARK: - NavigationViewControllerDelegate
+
+extension ExpoMapboxNavigationView: NavigationViewControllerDelegate {
+
+  func navigationViewController(
+    _ navigationViewController: NavigationViewController,
+    didUpdate progress: RouteProgress,
+    with location: CLLocation,
+    rawLocation: CLLocation
+  ) {
+    onRouteProgressChanged([
+      "distanceRemaining": progress.distanceRemaining,
+      "durationRemaining": progress.durationRemaining,
+      "distanceTraveled": progress.distanceTraveled,
+      "fractionTraveled": progress.fractionTraveled,
+    ])
+  }
+
+  func navigationViewControllerDidDismiss(
+    _ navigationViewController: NavigationViewController,
+    byCanceling canceled: Bool
+  ) {
+    if canceled {
+      onCancelNavigation()
+    } else {
+      onFinalDestinationArrival()
+    }
+  }
+
+  func navigationViewController(
+    _ navigationViewController: NavigationViewController,
+    didArriveAt waypoint: Waypoint
+  ) -> Bool {
+    let index = coordinates.firstIndex { coord in
+      coord.latitude == waypoint.coordinate.latitude
+        && coord.longitude == waypoint.coordinate.longitude
+    } ?? -1
+
+    if index == coordinates.count - 1 {
+      onFinalDestinationArrival()
+    } else {
+      onWaypointArrival(["waypointIndex": index])
+    }
+    return true
+  }
+
+  func navigationViewController(
+    _ navigationViewController: NavigationViewController,
+    didRerouteAlong route: Route
+  ) {
+    onRouteChanged()
+  }
+
+  func navigationViewController(
+    _ navigationViewController: NavigationViewController,
+    shouldRerouteFrom location: CLLocation
+  ) -> Bool {
+    onUserOffRoute()
+    return true
+  }
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@baeckerherz/expo-mapbox-navigation",
+  "version": "0.1.0",
+  "description": "Expo module wrapping Mapbox Navigation SDK v3 for iOS and Android",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "expo": {
+    "plugin": "./plugin/build/index.js"
+  },
+  "scripts": {
+    "build:plugin": "cd plugin && tsc",
+    "build": "tsc && yarn build:plugin",
+    "clean": "rm -rf build plugin/build",
+    "prepublishOnly": "yarn build:plugin",
+    "lint": "eslint src/"
+  },
+  "keywords": [
+    "expo",
+    "react-native",
+    "mapbox",
+    "navigation",
+    "turn-by-turn",
+    "driving",
+    "mapbox-navigation-sdk",
+    "mapbox-navigation-v3"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/baeckerherz/expo-mapbox-navigation"
+  },
+  "files": [
+    "src/",
+    "ios/",
+    "android/",
+    "plugin/build/",
+    "plugin/src/",
+    "expo-module.config.json",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "expo": ">=51.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.74.0"
+  },
+  "devDependencies": {
+    "expo-modules-core": "^2.5.0",
+    "expo-module-scripts": "^3.5.2",
+    "typescript": "^5.0.0",
+    "@expo/config-plugins": "^8.0.0"
+  }
+}

package/plugin/build/index.d.ts

@@ -0,0 +1,11 @@
+import { ConfigPlugin } from "@expo/config-plugins";
+interface PluginConfig {
+    /** Mapbox public access token (pk.xxx). Required for the native SDK. */
+    mapboxAccessToken: string;
+    /** Mapbox secret/download token (sk.xxx). Required for SPM and Maven auth. */
+    mapboxSecretToken?: string;
+    /** Mapbox Navigation SDK version. Default: "3.5.0" */
+    navigationSdkVersion?: string;
+}
+declare const _default: ConfigPlugin<PluginConfig>;
+export default _default;

package/plugin/build/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_plugins_1 = require("@expo/config-plugins");
+const withMapboxNavSPM_1 = require("./withMapboxNavSPM");
+const withMapboxNavPodfile_1 = require("./withMapboxNavPodfile");
+const withMapboxNavGradle_1 = require("./withMapboxNavGradle");
+const withMapboxNavigation = (config, { mapboxAccessToken, mapboxSecretToken, navigationSdkVersion = "3.5.0", }) => {
+    if (!mapboxAccessToken) {
+        throw new Error("[@baeckerherz/expo-mapbox-navigation] mapboxAccessToken is required.");
+    }
+    // Inject MBXAccessToken and required background modes into Info.plist
+    if (!config.ios)
+        config.ios = {};
+    if (!config.ios.infoPlist)
+        config.ios.infoPlist = {};
+    config.ios.infoPlist.MBXAccessToken = mapboxAccessToken;
+    config.ios.infoPlist.UIBackgroundModes = [
+        ...(config.ios.infoPlist.UIBackgroundModes || []),
+        "audio",
+        "location",
+    ];
+    config.ios.infoPlist.NSLocationWhenInUseUsageDescription =
+        config.ios.infoPlist.NSLocationWhenInUseUsageDescription ||
+            "This app needs your location for turn-by-turn navigation.";
+    config.ios.infoPlist.NSLocationAlwaysAndWhenInUseUsageDescription =
+        config.ios.infoPlist.NSLocationAlwaysAndWhenInUseUsageDescription ||
+            "This app needs your location for turn-by-turn navigation, including in the background.";
+    // iOS: Inject SPM package references
+    config = (0, withMapboxNavSPM_1.withMapboxNavSPM)(config, { navigationSdkVersion });
+    // iOS: Patch Podfile for SPM framework visibility
+    config = (0, withMapboxNavPodfile_1.withMapboxNavPodfile)(config);
+    // Android: Add Mapbox Maven repository
+    config = (0, withMapboxNavGradle_1.withMapboxNavGradle)(config);
+    return config;
+};
+exports.default = (0, config_plugins_1.createRunOncePlugin)(withMapboxNavigation, "@baeckerherz/expo-mapbox-navigation", "0.1.0");

package/plugin/build/withMapboxNavGradle.d.ts

@@ -0,0 +1,6 @@
+import { ConfigPlugin } from "@expo/config-plugins";
+/**
+ * Adds the authenticated Mapbox Maven repository to the Android
+ * project's root build.gradle for Navigation SDK v3 downloads.
+ */
+export declare const withMapboxNavGradle: ConfigPlugin;

package/plugin/build/withMapboxNavGradle.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withMapboxNavGradle = void 0;
+const config_plugins_1 = require("@expo/config-plugins");
+/**
+ * Adds the authenticated Mapbox Maven repository to the Android
+ * project's root build.gradle for Navigation SDK v3 downloads.
+ */
+const withMapboxNavGradle = (config) => {
+    return (0, config_plugins_1.withProjectBuildGradle)(config, (config) => {
+        let contents = config.modResults.contents;
+        if (!contents.includes("api.mapbox.com/downloads/v2/releases/maven")) {
+            const mapboxMaven = `
+        // @baeckerherz/expo-mapbox-navigation: Mapbox Navigation SDK Maven repository
+        maven {
+            url = uri("https://api.mapbox.com/downloads/v2/releases/maven")
+            authentication {
+                create<BasicAuthentication>("basic")
+            }
+            credentials {
+                username = "mapbox"
+                password = providers.gradleProperty("MAPBOX_DOWNLOADS_TOKEN").getOrElse("")
+            }
+        }`;
+            contents = contents.replace(/allprojects\s*\{\s*repositories\s*\{/, `allprojects {\n    repositories {${mapboxMaven}`);
+        }
+        config.modResults.contents = contents;
+        return config;
+    });
+};
+exports.withMapboxNavGradle = withMapboxNavGradle;

package/plugin/build/withMapboxNavPodfile.d.ts

@@ -0,0 +1,7 @@
+import { ConfigPlugin } from "@expo/config-plugins";
+/**
+ * Patches the iOS Podfile to make SPM framework products visible
+ * to the ExpoMapboxNavigation pod target, and sets BUILD_LIBRARY_FOR_DISTRIBUTION
+ * for Mapbox-related pods.
+ */
+export declare const withMapboxNavPodfile: ConfigPlugin;

package/plugin/build/withMapboxNavPodfile.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withMapboxNavPodfile = void 0;
+const config_plugins_1 = require("@expo/config-plugins");
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+/**
+ * Patches the iOS Podfile to make SPM framework products visible
+ * to the ExpoMapboxNavigation pod target, and sets BUILD_LIBRARY_FOR_DISTRIBUTION
+ * for Mapbox-related pods.
+ */
+const withMapboxNavPodfile = (config) => {
+    return (0, config_plugins_1.withDangerousMod)(config, [
+        "ios",
+        async (config) => {
+            const podfilePath = path.join(config.modRequest.platformProjectRoot, "Podfile");
+            let contents = fs.readFileSync(podfilePath, "utf8");
+            const hook = `
+    # @baeckerherz/expo-mapbox-navigation: Make SPM frameworks visible to the pod target
+    installer.pods_project.targets.each do |target|
+      if target.name == 'ExpoMapboxNavigation'
+        target.build_configurations.each do |config|
+          shared_products = '$(BUILT_PRODUCTS_DIR)/..'
+          config.build_settings['FRAMEWORK_SEARCH_PATHS'] ||= ['$(inherited)']
+          config.build_settings['FRAMEWORK_SEARCH_PATHS'] << shared_products
+          config.build_settings['SWIFT_INCLUDE_PATHS'] ||= ['$(inherited)']
+          config.build_settings['SWIFT_INCLUDE_PATHS'] << shared_products
+        end
+      end
+      if target.name.start_with?('Mapbox') || target.name == 'Turf'
+        target.build_configurations.each do |config|
+          config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
+        end
+      end
+    end`;
+            if (!contents.includes("@baeckerherz/expo-mapbox-navigation: Make SPM frameworks")) {
+                if (contents.includes("post_install do |installer|")) {
+                    contents = contents.replace("post_install do |installer|", `post_install do |installer|${hook}`);
+                }
+            }
+            fs.writeFileSync(podfilePath, contents);
+            return config;
+        },
+    ]);
+};
+exports.withMapboxNavPodfile = withMapboxNavPodfile;

package/plugin/build/withMapboxNavSPM.d.ts

@@ -0,0 +1,13 @@
+import { ConfigPlugin } from "@expo/config-plugins";
+interface SPMConfig {
+    navigationSdkVersion: string;
+}
+/**
+ * Injects Mapbox Navigation SDK v3 as a Swift Package Manager dependency
+ * into the Xcode project's .pbxproj. This avoids vendoring .xcframework files.
+ *
+ * Adds XCRemoteSwiftPackageReference, XCSwiftPackageProductDependency,
+ * and links MapboxNavigationUIKit + MapboxNavigationCore to the main target.
+ */
+export declare const withMapboxNavSPM: ConfigPlugin<SPMConfig>;
+export {};