@atomiqlab/react-native-mapbox-navigation 1.1.0

package/ios/MapboxNavigationView.swift

@@ -0,0 +1,298 @@
+import ExpoModulesCore
+import MapboxNavigation
+import MapboxDirections
+import MapboxCoreNavigation
+import CoreLocation
+import UIKit
+
+class MapboxNavigationView: ExpoView {
+  var startOrigin: [String: Double]? {
+    didSet { startNavigationIfReady() }
+  }
+  var destination: [String: Any]? {
+    didSet { startNavigationIfReady() }
+  }
+  var waypoints: [[String: Any]]? {
+    didSet { startNavigationIfReady() }
+  }
+  var shouldSimulateRoute: Bool = false {
+    didSet { startNavigationIfReady() }
+  }
+  var showCancelButton: Bool = true
+  var mute: Bool = false
+  var voiceVolume: Double = 1
+  var cameraPitch: Double?
+  var cameraZoom: Double?
+  var cameraMode: String = "following"
+  var mapStyleUri: String?
+  var routeAlternatives: Bool = false
+  var showsSpeedLimits: Bool = true
+  var showsWayNameLabel: Bool = true
+  var distanceUnit: String = "metric"
+  var language: String = "en"
+  
+  private var navigationViewController: NavigationViewController?
+  private var hostViewController: UIViewController?
+  private var isRouteCalculationInProgress = false
+  
+  let onLocationChange = EventDispatcher()
+  let onRouteProgressChange = EventDispatcher()
+  let onBannerInstruction = EventDispatcher()
+  let onArrive = EventDispatcher()
+  let onCancelNavigation = EventDispatcher()
+  let onError = EventDispatcher()
+  
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    setupView()
+  }
+  
+  private func setupView() {
+    backgroundColor = .black
+  }
+  
+  override func didMoveToWindow() {
+    super.didMoveToWindow()
+    
+    if window != nil {
+      startNavigationIfReady()
+    }
+  }
+  
+  private func startNavigationIfReady() {
+    guard navigationViewController == nil else {
+      return
+    }
+    guard !isRouteCalculationInProgress else {
+      return
+    }
+    guard let origin = startOrigin,
+          let dest = destination,
+          let originLat = origin["latitude"],
+          let originLng = origin["longitude"],
+          let destLat = dest["latitude"] as? Double,
+          let destLng = dest["longitude"] as? Double else {
+      return
+    }
+    
+    let originCoord = CLLocationCoordinate2D(latitude: originLat, longitude: originLng)
+    let destCoord = CLLocationCoordinate2D(latitude: destLat, longitude: destLng)
+    
+    var waypointsList = [Waypoint(coordinate: originCoord)]
+    
+    // Add intermediate waypoints
+    if let intermediateWaypoints = waypoints {
+      for wp in intermediateWaypoints {
+        if let lat = wp["latitude"] as? Double,
+           let lng = wp["longitude"] as? Double {
+          let coord = CLLocationCoordinate2D(latitude: lat, longitude: lng)
+          let waypoint = Waypoint(coordinate: coord)
+          waypoint.name = wp["name"] as? String
+          waypointsList.append(waypoint)
+        }
+      }
+    }
+    
+    // Add final destination
+    let finalWaypoint = Waypoint(coordinate: destCoord)
+    finalWaypoint.name = (dest["name"] as? String) ?? (dest["title"] as? String) ?? "Destination"
+    waypointsList.append(finalWaypoint)
+    
+    let routeOptions = NavigationRouteOptions(waypoints: waypointsList)
+    routeOptions.locale = Locale(identifier: language)
+    routeOptions.distanceMeasurementSystem = distanceUnit == "imperial" ? .imperial : .metric
+    routeOptions.includesAlternativeRoutes = routeAlternatives
+    
+    isRouteCalculationInProgress = true
+    Directions.shared.calculate(routeOptions) { [weak self] (_, result) in
+      guard let self = self else { return }
+      self.isRouteCalculationInProgress = false
+      
+      switch result {
+      case .success(let response):
+        guard response.routes?.first != nil else {
+          self.onError([
+            "code": "NO_ROUTE",
+            "message": "No route found"
+          ])
+          return
+        }
+        
+        DispatchQueue.main.async {
+          self.embedNavigation(response: response, routeOptions: routeOptions)
+        }
+        
+      case .failure(let error):
+        self.onError([
+          "code": "ROUTE_ERROR",
+          "message": error.localizedDescription
+        ])
+      }
+    }
+  }
+  
+  private func embedNavigation(response: RouteResponse, routeOptions: NavigationRouteOptions) {
+    let indexedRouteResponse = IndexedRouteResponse(routeResponse: response, routeIndex: 0)
+    let navigationService = MapboxNavigationService(
+      indexedRouteResponse: indexedRouteResponse,
+      credentials: Directions.shared.credentials,
+      simulating: shouldSimulateRoute ? .always : nil
+    )
+    
+    let navigationOptions = buildNavigationOptions(navigationService: navigationService)
+    
+    let viewController = NavigationViewController(
+      for: indexedRouteResponse,
+      navigationOptions: navigationOptions
+    )
+    
+    viewController.delegate = self
+    
+    NavigationSettings.shared.distanceUnit = distanceUnit == "imperial" ? .mile : .kilometer
+    NavigationSettings.shared.voiceMuted = mute
+    NavigationSettings.shared.voiceVolume = Float(max(0, min(voiceVolume, 1)))
+    viewController.showsSpeedLimits = showsSpeedLimits
+    applyCameraConfiguration(to: viewController)
+    
+    // Find the parent view controller
+    var parentVC: UIViewController? = self.window?.rootViewController
+    while let presented = parentVC?.presentedViewController {
+      parentVC = presented
+    }
+    
+    if let parent = parentVC {
+      // Add as child view controller
+      parent.addChild(viewController)
+      addSubview(viewController.view)
+      viewController.view.frame = bounds
+      viewController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+      viewController.didMove(toParent: parent)
+      
+      navigationViewController = viewController
+      hostViewController = parent
+    }
+  }
+  
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    navigationViewController?.view.frame = bounds
+  }
+  
+  deinit {
+    cleanupNavigation()
+  }
+  
+  private func cleanupNavigation() {
+    navigationViewController?.willMove(toParent: nil)
+    navigationViewController?.view.removeFromSuperview()
+    navigationViewController?.removeFromParent()
+    navigationViewController = nil
+  }
+
+  private func applyCameraConfiguration(to viewController: NavigationViewController) {
+    guard
+      let navigationMapView = viewController.navigationMapView,
+      let viewportDataSource = navigationMapView.navigationCamera
+      .viewportDataSource as? NavigationViewportDataSource else {
+      return
+    }
+
+    let normalizedMode = cameraMode.lowercased()
+
+    if normalizedMode == "overview" {
+      viewportDataSource.options.followingCameraOptions.zoomUpdatesAllowed = false
+      viewportDataSource.followingMobileCamera.zoom = CGFloat(cameraZoom ?? 10)
+      viewportDataSource.options.followingCameraOptions.pitchUpdatesAllowed = false
+      viewportDataSource.followingMobileCamera.pitch = 0
+    } else {
+      // Keep dynamic camera updates in following mode so turn-by-turn camera behavior
+      // (zoom/pitch/bearing adaptation) remains managed by the SDK.
+      viewportDataSource.options.followingCameraOptions.pitchUpdatesAllowed = true
+      viewportDataSource.options.followingCameraOptions.zoomUpdatesAllowed = true
+      viewportDataSource.options.followingCameraOptions.bearingUpdatesAllowed = true
+
+      if let pitch = cameraPitch {
+        viewportDataSource.followingMobileCamera.pitch = CGFloat(max(0, min(pitch, 85)))
+      }
+
+      if let zoom = cameraZoom {
+        viewportDataSource.followingMobileCamera.zoom = CGFloat(max(1, min(zoom, 22)))
+      }
+    }
+
+    navigationMapView.navigationCamera.follow()
+  }
+
+  private func buildNavigationOptions(navigationService: NavigationService) -> NavigationOptions {
+    guard
+      let styleUri = mapStyleUri?.trimmingCharacters(in: .whitespacesAndNewlines),
+      !styleUri.isEmpty,
+      let styleURL = URL(string: styleUri)
+    else {
+      return NavigationOptions(navigationService: navigationService)
+    }
+
+    let dayStyle = DayStyle()
+    dayStyle.mapStyleURL = styleURL
+
+    let nightStyle = NightStyle()
+    nightStyle.mapStyleURL = styleURL
+
+    return NavigationOptions(styles: [dayStyle, nightStyle], navigationService: navigationService)
+  }
+}
+
+// MARK: - NavigationViewControllerDelegate
+extension MapboxNavigationView: NavigationViewControllerDelegate {
+  func navigationViewController(
+    _ navigationViewController: NavigationViewController,
+    didUpdate progress: RouteProgress,
+    with location: CLLocation,
+    rawLocation: CLLocation
+  ) {
+    if cameraMode.lowercased() == "following" {
+      navigationViewController.navigationMapView?.navigationCamera.follow()
+    }
+
+    onLocationChange([
+      "latitude": location.coordinate.latitude,
+      "longitude": location.coordinate.longitude,
+      "bearing": location.course,
+      "speed": location.speed,
+      "altitude": location.altitude,
+      "accuracy": location.horizontalAccuracy
+    ])
+    
+    onRouteProgressChange([
+      "distanceTraveled": progress.distanceTraveled,
+      "distanceRemaining": progress.distanceRemaining,
+      "durationRemaining": progress.durationRemaining,
+      "fractionTraveled": progress.fractionTraveled
+    ])
+
+    onBannerInstruction([
+      "primaryText": progress.currentLegProgress.currentStep.instructions,
+      "stepDistanceRemaining": progress.currentLegProgress.currentStepProgress.distanceRemaining
+    ])
+  }
+  
+  func navigationViewController(
+    _ navigationViewController: NavigationViewController,
+    didArriveAt waypoint: Waypoint
+  ) -> Bool {
+    onArrive([
+      "name": waypoint.name ?? ""
+    ])
+    return true
+  }
+  
+  func navigationViewControllerDidDismiss(
+    _ navigationViewController: NavigationViewController,
+    byCanceling canceled: Bool
+  ) {
+    if canceled {
+      onCancelNavigation([:])
+    }
+    cleanupNavigation()
+  }
+}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@atomiqlab/react-native-mapbox-navigation",
+  "version": "1.1.0",
+  "description": "Native Mapbox turn-by-turn navigation for Expo and React Native (iOS + Android)",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
+  "react-native": "src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./app.plugin.js": "./app.plugin.js",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "android/src",
+    "android/build.gradle",
+    "android/src/main/AndroidManifest.xml",
+    "ios/ExpoMapboxNavigationNative.podspec",
+    "ios/MapboxNavigationModule.swift",
+    "ios/MapboxNavigationView.swift",
+    "src",
+    "app.plugin.js",
+    "expo-module.config.json",
+    "README.md",
+    "QUICKSTART.md",
+    "CHANGELOG.md",
+    "docs",
+    "scripts"
+  ],
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "verify": "node ./scripts/verify-release.mjs"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "mapbox",
+    "navigation",
+    "turn-by-turn"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ATOMIQTECH/react-native-mapbox-navigation"
+  },
+  "homepage": "https://github.com/ATOMIQTECH/react-native-mapbox-navigation#readme",
+  "bugs": {
+    "url": "https://github.com/ATOMIQTECH/react-native-mapbox-navigation/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "expo": {
+    "plugins": [
+      "./app.plugin.js"
+    ]
+  },
+  "peerDependencies": {
+    "expo": ">=50",
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "expo-module-scripts": "^3.0.0"
+  }
+}

package/scripts/verify-release.mjs

@@ -0,0 +1,115 @@
+import { execSync } from "node:child_process";
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const moduleDir = path.resolve(path.dirname(__filename), "..");
+const repoRoot = path.resolve(moduleDir, "..", "..");
+const androidDir = path.join(repoRoot, "android");
+const envFilePath = path.join(repoRoot, ".env");
+
+function loadDotEnv(filePath) {
+  if (!existsSync(filePath)) {
+    return;
+  }
+
+  const content = readFileSync(filePath, "utf8");
+  for (const line of content.split(/\r?\n/)) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#") || !trimmed.includes("=")) {
+      continue;
+    }
+
+    const separatorIndex = trimmed.indexOf("=");
+    const key = trimmed.slice(0, separatorIndex).trim();
+    const rawValue = trimmed.slice(separatorIndex + 1).trim();
+    if (!key || process.env[key]) {
+      continue;
+    }
+
+    let value = rawValue;
+    if (
+      (value.startsWith('"') && value.endsWith('"')) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      value = value.slice(1, -1);
+    }
+    process.env[key] = value;
+  }
+}
+
+function run(command, cwd = moduleDir, options = {}) {
+  const { optionalOnOfflineGradle = false } = options;
+  console.log(`\n> ${command} (${cwd})`);
+  try {
+    const output = execSync(command, {
+      cwd,
+      stdio: "pipe",
+      env: {
+        ...process.env,
+        GRADLE_USER_HOME:
+          process.env.GRADLE_USER_HOME || "/tmp/gradle-user-home-react-native-mapbox-navigation",
+      },
+    });
+    if (output?.length) {
+      process.stdout.write(output);
+    }
+  } catch (error) {
+    const stdout = String(error?.stdout || "");
+    const stderr = String(error?.stderr || "");
+    if (stdout) {
+      process.stdout.write(stdout);
+    }
+    if (stderr) {
+      process.stderr.write(stderr);
+    }
+
+    const combined = `${stdout}\n${stderr}\n${String(error?.message || "")}`;
+    const skippableGradleEnvironmentIssue =
+      combined.includes("UnknownHostException") ||
+      combined.includes("FileLockContentionHandler") ||
+      combined.includes("SocketException: Operation not permitted");
+
+    if (optionalOnOfflineGradle && skippableGradleEnvironmentIssue) {
+      console.warn(`\nSkipping optional Gradle check due to restricted/offline environment: ${command}`);
+      return;
+    }
+    throw error;
+  }
+}
+
+function runWithFallback(commands, cwd, options = {}) {
+  let lastError;
+  for (const command of commands) {
+    try {
+      run(command, cwd, options);
+      return;
+    } catch (error) {
+      lastError = error;
+      console.warn(`\nCommand failed, trying fallback: ${command}`);
+    }
+  }
+  throw lastError;
+}
+
+loadDotEnv(envFilePath);
+
+run("npx tsc --noEmit", repoRoot);
+
+if (existsSync(path.join(androidDir, "gradlew"))) {
+  runWithFallback(
+    [
+      "./gradlew :react-native-mapbox-navigation:compileDebugKotlin",
+      "./gradlew :mapbox-navigation-native:compileDebugKotlin",
+    ],
+    androidDir,
+    { optionalOnOfflineGradle: true }
+  );
+} else {
+  console.log("\n> Skipping Android compile check (android/gradlew not found).");
+}
+
+run("npm pack --dry-run --cache /tmp/npm-cache-react-native-mapbox-navigation", moduleDir);
+
+console.log("\nRelease verification completed.");

package/src/MapboxNavigation.types.ts

@@ -0,0 +1,136 @@
+export type Coordinate = {
+  latitude: number;
+  longitude: number;
+};
+
+export type Waypoint = Coordinate & {
+  name?: string;
+};
+
+export type NavigationOptions = {
+  startOrigin?: Coordinate;
+  destination: Waypoint;
+  waypoints?: Waypoint[];
+  shouldSimulateRoute?: boolean;
+  uiTheme?: 'system' | 'light' | 'dark' | 'day' | 'night';
+  routeAlternatives?: boolean;
+  distanceUnit?: 'metric' | 'imperial';
+  language?: string;
+  mute?: boolean;
+  voiceVolume?: number;
+  cameraPitch?: number;
+  cameraZoom?: number;
+  cameraMode?: 'following' | 'overview';
+  mapStyleUri?: string;
+  mapStyleUriDay?: string;
+  mapStyleUriNight?: string;
+  showsSpeedLimits?: boolean;
+  showsWayNameLabel?: boolean;
+  showsTripProgress?: boolean;
+  showsManeuverView?: boolean;
+  showsActionButtons?: boolean;
+};
+
+export type NavigationSettings = {
+  isNavigating: boolean;
+  mute: boolean;
+  voiceVolume: number;
+  distanceUnit: 'metric' | 'imperial';
+  language: string;
+};
+
+export type LocationUpdate = {
+  latitude: number;
+  longitude: number;
+  bearing?: number;
+  speed?: number;
+  altitude?: number;
+  accuracy?: number;
+};
+
+export type RouteProgress = {
+  distanceTraveled: number;
+  distanceRemaining: number;
+  durationRemaining: number;
+  fractionTraveled: number;
+};
+
+export type ArrivalEvent = {
+  index?: number;
+  name?: string;
+};
+
+export type NavigationError = {
+  code: string;
+  message: string;
+};
+
+export type BannerInstruction = {
+  primaryText: string;
+  secondaryText?: string;
+  stepDistanceRemaining?: number;
+};
+
+export type Subscription = {
+  remove: () => void;
+};
+
+export interface MapboxNavigationModule {
+  // Start navigation with options
+  startNavigation(options: NavigationOptions): Promise<void>;
+  
+  // Stop/cancel navigation
+  stopNavigation(): Promise<void>;
+  
+  // Mute/unmute voice guidance
+  setMuted(muted: boolean): Promise<void>;
+
+  // Set voice volume (0.0 - 1.0)
+  setVoiceVolume(volume: number): Promise<void>;
+
+  // Set distance unit used by spoken and visual instructions
+  setDistanceUnit(unit: 'metric' | 'imperial'): Promise<void>;
+
+  // Set route instruction language (BCP-47, e.g. 'en', 'fr')
+  setLanguage(language: string): Promise<void>;
+  
+  // Check if navigation is active
+  isNavigating(): Promise<boolean>;
+
+  // Get current native navigation settings
+  getNavigationSettings(): Promise<NavigationSettings>;
+}
+
+export interface MapboxNavigationViewProps {
+  style?: any;
+  startOrigin?: Coordinate;
+  destination: Waypoint;
+  waypoints?: Waypoint[];
+  shouldSimulateRoute?: boolean;
+  showCancelButton?: boolean;
+  uiTheme?: 'system' | 'light' | 'dark' | 'day' | 'night';
+  distanceUnit?: 'metric' | 'imperial';
+  language?: string;
+  mute?: boolean;
+  voiceVolume?: number;
+  cameraPitch?: number;
+  cameraZoom?: number;
+  cameraMode?: 'following' | 'overview';
+  mapStyleUri?: string;
+  mapStyleUriDay?: string;
+  mapStyleUriNight?: string;
+  routeAlternatives?: boolean;
+  showsSpeedLimits?: boolean;
+  showsWayNameLabel?: boolean;
+  showsTripProgress?: boolean;
+  showsManeuverView?: boolean;
+  showsActionButtons?: boolean;
+  
+  // Event callbacks
+  onLocationChange?: (location: LocationUpdate) => void;
+  onRouteProgressChange?: (progress: RouteProgress) => void;
+  onArrive?: (point: ArrivalEvent) => void;
+  onCancelNavigation?: () => void;
+  onError?: (error: NavigationError) => void;
+  onBannerInstruction?: (instruction: BannerInstruction) => void;
+}