@jacques_gordon/expo-mapbox-navigation 1.0.8 → 2.0.2

package/plugin/src/index.js

@@ -0,0 +1,216 @@
+const { withAppBuildGradle, withProjectBuildGradle, withAndroidManifest, withInfoPlist, withDangerousMod } = require('@expo/config-plugins');
+const fs = require('fs');
+const path = require('path');
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Config Plugin for @jacques_gordon/expo-mapbox-navigation
+//
+// This plugin:
+//  1. Adds Mapbox Maven repository to android/build.gradle
+//  2. Forces NDK 27 for 16 KB page size compatibility
+//  3. Enables jniLibs.useLegacyPackaging = false (required for 16 KB pages)
+//  4. Adds Mapbox access token to android resources & iOS Info.plist
+//  5. Adds background location & audio modes for iOS
+//  6. Supports androidColorOverrides for UI theming
+// ─────────────────────────────────────────────────────────────────────────────
+
+const NDK_VERSION = '27.0.12077973';
+const MAPBOX_MAPS_MIN_VERSION = '11.11.0';
+
+/**
+ * @param {import('@expo/config-plugins').ConfigPlugin<{
+ *   accessToken: string,
+ *   mapboxMapsVersion?: string,
+ *   androidColorOverrides?: Record<string, string>
+ * }>}
+ */
+const withMapboxNavigation = (config, options = {}) => {
+  const {
+    accessToken,
+    mapboxMapsVersion = MAPBOX_MAPS_MIN_VERSION,
+    androidColorOverrides = {},
+  } = options;
+
+  if (!accessToken) {
+    throw new Error(
+      '[@jacques_gordon/expo-mapbox-navigation] `accessToken` is required in the plugin config.\n' +
+      'Add it to your app.json plugins array:\n' +
+      '  ["@jacques_gordon/expo-mapbox-navigation", { "accessToken": "pk.your_token" }]'
+    );
+  }
+
+  // Validate mapboxMapsVersion >= 11.11.0
+  const [major, minor] = mapboxMapsVersion.split('.').map(Number);
+  if (major < 11 || (major === 11 && minor < 11)) {
+    throw new Error(
+      `[@jacques_gordon/expo-mapbox-navigation] mapboxMapsVersion must be >= 11.11.0.\n` +
+      `Provided: ${mapboxMapsVersion}\n` +
+      `This minimum version is required to fix the CameraAnimationsUtils crash (issue #43).`
+    );
+  }
+
+  // ── Android: project-level build.gradle ─────────────────────────────────
+  config = withProjectBuildGradle(config, (mod) => {
+    let contents = mod.modResults.contents;
+
+    // Add Mapbox Maven repo if not already present
+    if (!contents.includes('api.mapbox.com/downloads/v2/releases/maven')) {
+      const mavenBlock = `
+        maven {
+            url 'https://api.mapbox.com/downloads/v2/releases/maven'
+            authentication { basic(BasicAuthentication) }
+            credentials {
+                username = 'mapbox'
+                password = project.hasProperty('MAPBOX_DOWNLOADS_TOKEN')
+                    ? project.property('MAPBOX_DOWNLOADS_TOKEN')
+                    : System.getenv('MAPBOX_DOWNLOADS_TOKEN') ?: ""
+            }
+        }`;
+
+      // Insert into allprojects.repositories if it exists
+      if (contents.includes('allprojects') && contents.includes('repositories')) {
+        contents = contents.replace(
+          /allprojects\s*\{[\s\S]*?repositories\s*\{/,
+          (match) => match + mavenBlock
+        );
+      }
+    }
+
+    mod.modResults.contents = contents;
+    return mod;
+  });
+
+  // ── Android: app-level build.gradle ─────────────────────────────────────
+  config = withAppBuildGradle(config, (mod) => {
+    let contents = mod.modResults.contents;
+
+    // Force NDK 27 for 16 KB page size
+    if (!contents.includes('ndkVersion')) {
+      contents = contents.replace(
+        /android\s*\{/,
+        `android {\n    ndkVersion "${NDK_VERSION}" // Required for 16 KB page size (expo-mapbox-navigation)`
+      );
+    } else if (!contents.includes(NDK_VERSION)) {
+      // Replace any existing ndkVersion
+      contents = contents.replace(
+        /ndkVersion\s+["'][^"']*["']/,
+        `ndkVersion "${NDK_VERSION}" // Forced by expo-mapbox-navigation for 16KB page size`
+      );
+    }
+
+    // Enable useLegacyPackaging = false for 16 KB page alignment
+    if (!contents.includes('useLegacyPackaging')) {
+      contents = contents.replace(
+        /android\s*\{/,
+        `android {\n    packagingOptions {\n        jniLibs {\n            useLegacyPackaging = false // 16 KB page size support\n        }\n    }`
+      );
+    }
+
+    // Pin Mapbox Maps version via resolutionStrategy
+    const resolutionBlock = `
+    configurations.all {
+        resolutionStrategy {
+            // Force Mapbox Maps SDK >= ${mapboxMapsVersion} — required for NavigationCamera compatibility
+            force "com.mapbox.maps:android:${mapboxMapsVersion}"
+        }
+    }`;
+
+    if (!contents.includes('com.mapbox.maps:android')) {
+      contents = contents + '\n' + resolutionBlock;
+    }
+
+    mod.modResults.contents = contents;
+    return mod;
+  });
+
+  // ── Android: AndroidManifest — add access token as meta-data ─────────────
+  config = withAndroidManifest(config, (mod) => {
+    const mainApp = mod.modResults.manifest.application?.[0];
+    if (mainApp) {
+      if (!mainApp['meta-data']) {
+        mainApp['meta-data'] = [];
+      }
+
+      const tokenMeta = mainApp['meta-data'].find(
+        (m) => m.$?.['android:name'] === 'com.mapbox.token'
+      );
+
+      if (!tokenMeta) {
+        mainApp['meta-data'].push({
+          $: {
+            'android:name': 'com.mapbox.token',
+            'android:value': accessToken,
+          },
+        });
+      }
+    }
+    return mod;
+  });
+
+  // ── Android: Write color overrides resource file ──────────────────────────
+  if (Object.keys(androidColorOverrides).length > 0) {
+    config = withDangerousMod(config, [
+      'android',
+      async (mod) => {
+        const colorsDir = path.join(
+          mod.modRequest.platformProjectRoot,
+          'app/src/main/res/values'
+        );
+
+        if (!fs.existsSync(colorsDir)) {
+          fs.mkdirSync(colorsDir, { recursive: true });
+        }
+
+        const colorEntries = Object.entries(androidColorOverrides)
+          .map(([name, value]) => `    <color name="${name}">${value}</color>`)
+          .join('\n');
+
+        const colorsXml = `<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by @jacques_gordon/expo-mapbox-navigation config plugin -->
+<resources>
+${colorEntries}
+</resources>
+`;
+
+        fs.writeFileSync(
+          path.join(colorsDir, 'mapbox_navigation_colors.xml'),
+          colorsXml
+        );
+
+        return mod;
+      },
+    ]);
+  }
+
+  // ── iOS: Info.plist ──────────────────────────────────────────────────────
+  config = withInfoPlist(config, (mod) => {
+    // Mapbox public token
+    mod.modResults.MBXAccessToken = accessToken;
+
+    // Location permissions (required for navigation)
+    if (!mod.modResults.NSLocationWhenInUseUsageDescription) {
+      mod.modResults.NSLocationWhenInUseUsageDescription =
+        'Your location is used for turn-by-turn navigation.';
+    }
+    if (!mod.modResults.NSLocationAlwaysAndWhenInUseUsageDescription) {
+      mod.modResults.NSLocationAlwaysAndWhenInUseUsageDescription =
+        'Your location is used for turn-by-turn navigation even when the app is in the background.';
+    }
+
+    // Background modes required for navigation audio + location tracking
+    if (!mod.modResults.UIBackgroundModes) {
+      mod.modResults.UIBackgroundModes = [];
+    }
+    for (const mode of ['audio', 'location']) {
+      if (!mod.modResults.UIBackgroundModes.includes(mode)) {
+        mod.modResults.UIBackgroundModes.push(mode);
+      }
+    }
+
+    return mod;
+  });
+
+  return config;
+};
+
+module.exports = withMapboxNavigation;

package/src/index.tsx

@@ -0,0 +1,162 @@
+import {
+  requireNativeViewManager,
+  NativeModulesProxy,
+  EventEmitter,
+} from 'expo-modules-core';
+import React from 'react';
+import { ViewStyle, StyleSheet } from 'react-native';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface Coordinate {
+  latitude: number;
+  longitude: number;
+}
+
+/**
+ * Voice/distance unit system for navigation instructions.
+ *
+ * Fixes Issue #31: previously always defaulted to imperial.
+ * - "metric"   → km/m for distances, km/h for speed
+ * - "imperial" → mi/ft for distances, mph for speed
+ * - undefined  → auto-detected from device locale
+ */
+export type VoiceUnits = 'metric' | 'imperial';
+
+export type NavigationProfile =
+  | 'driving-traffic'
+  | 'driving'
+  | 'walking'
+  | 'cycling';
+
+export interface MapboxNavigationViewProps {
+  /** Navigation route waypoints. Minimum 2 coordinates required. */
+  coordinates: Coordinate[];
+
+  /**
+   * Indices into `coordinates` that are considered waypoints.
+   * First and last must be included. Defaults to all points.
+   */
+  waypointIndices?: number[];
+
+  /**
+   * BCP-47 language/locale tag for map labels and voice instructions.
+   * Example: "fr", "en-US", "de-DE". Defaults to device locale.
+   */
+  language?: string;
+
+  /**
+   * Unit system for voice instructions and distance display.
+   * - "metric"   → kilometres and metres (default outside US/UK)
+   * - "imperial" → miles and feet (default in US/UK)
+   * - undefined  → auto-detected from device locale
+   *
+   * Fixes Issue #31.
+   */
+  voiceUnits?: VoiceUnits;
+
+  /**
+   * Mapbox Directions profile.
+   * Android: omit the "mapbox/" prefix (handled internally).
+   */
+  navigationProfile?: NavigationProfile;
+
+  /** Road / feature types to exclude from the route */
+  excludeTypes?: string[];
+
+  /** Mapbox map style URL. Defaults to Mapbox Navigation Day style. */
+  mapStyle?: string;
+
+  /** Whether audio is initially muted. Defaults to false. */
+  mute?: boolean;
+
+  /** Maximum vehicle height in metres (for height-restricted routes). */
+  maxHeight?: number;
+
+  /** Maximum vehicle width in metres (for width-restricted routes). */
+  maxWidth?: number;
+
+  /**
+   * When true, uses the Mapbox Map Matching API instead of the
+   * standard Directions API. Useful when you want a route that
+   * exactly follows the given coordinates.
+   */
+  useMapMatching?: boolean;
+
+  /**
+   * URL template for a custom raster tile overlay.
+   * Must include {x}, {y}, {z} placeholders.
+   * Example: "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+   */
+  customRasterTileUrl?: string;
+
+  /** Map layer ID above which the custom raster layer is placed. */
+  customRasterAboveLayerId?: string;
+
+  // ── Event callbacks ──────────────────────────────────────────────────────
+
+  onRouteProgressChanged?: (event: { nativeEvent: RouteProgressEvent }) => void;
+  onRoutesReady?: (event: { nativeEvent: RoutesReadyEvent }) => void;
+  onNavigationFinished?: (event: { nativeEvent: {} }) => void;
+  onNavigationCancelled?: (event: { nativeEvent: {} }) => void;
+  onRoutesFailed?: (event: { nativeEvent: { message: string } }) => void;
+  onArrival?: (event: { nativeEvent: {} }) => void;
+
+  style?: ViewStyle;
+}
+
+export interface RouteProgressEvent {
+  distanceRemaining: number;
+  durationRemaining: number;
+  distanceTraveled: number;
+  fractionTraveled: number;
+  currentStepDistanceRemaining: number;
+}
+
+export interface RoutesReadyEvent {
+  routeCount: number;
+  distanceMeters: number;
+  durationSeconds: number;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Native view
+// ─────────────────────────────────────────────────────────────────────────────
+
+const NativeView = requireNativeViewManager('ExpoMapboxNavigation');
+
+/**
+ * MapboxNavigationView
+ *
+ * Renders the Mapbox Drop-In Navigation UI inside your Expo/React Native app.
+ *
+ * @example
+ * ```tsx
+ * <MapboxNavigationView
+ *   style={{ flex: 1 }}
+ *   coordinates={[
+ *     { latitude: 48.8566, longitude: 2.3522 },
+ *     { latitude: 51.5074, longitude: -0.1278 },
+ *   ]}
+ *   voiceUnits="metric"
+ *   language="fr"
+ *   onArrival={() => console.log('Arrived!')}
+ * />
+ * ```
+ */
+export function MapboxNavigationView(props: MapboxNavigationViewProps) {
+  return (
+    <NativeView
+      {...props}
+      style={[styles.fullSize, props.style]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  fullSize: { flex: 1 },
+});
+
+export default MapboxNavigationView;

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -1,2 +0,0 @@
-#Sun Jun 28 09:52:58 CEST 2026
-gradle.version=8.9

package/build/MapboxNavigation.types.d.ts

@@ -1,132 +0,0 @@
-import type { StyleProp, ViewStyle } from 'react-native';
-export interface Coordinate {
-    latitude: number;
-    longitude: number;
-}
-export interface RouteProgress {
-    /** Distance restante en mètres */
-    distanceRemaining: number;
-    /** Distance parcourue en mètres */
-    distanceTraveled: number;
-    /** Durée restante en secondes */
-    durationRemaining: number;
-    /** Fraction parcourue (0.0 → 1.0) */
-    fractionTraveled: number;
-}
-export interface NativeRouteProgressEvent {
-    nativeEvent: RouteProgress;
-}
-export interface NativeWaypointEvent {
-    nativeEvent: RouteProgress;
-}
-export interface MapboxNavigationViewProps {
-    /** Style du composant (ex: { flex: 1 }) */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Tableau de coordonnées { latitude, longitude }.
-     * Minimum 2 points (départ + destination).
-     * Requis.
-     */
-    coordinates: Coordinate[];
-    /**
-     * Indices dans `coordinates` considérés comme des waypoints/destinations intermédiaires.
-     * Par défaut, tous les points sont des waypoints.
-     * Au moins le premier et le dernier index doivent être inclus.
-     */
-    waypointIndices?: number[];
-    /**
-     * Utilise l'API Map Matching de Mapbox au lieu de l'API Directions standard.
-     * Utile pour forcer un trajet suivant exactement les coordonnées fournies.
-     * Défaut: false
-     */
-    useRouteMatchingApi?: boolean;
-    /**
-     * Locale/langue pour les labels de la carte, les directions et la voix.
-     * Exemples: "fr", "en", "de", "nl".
-     * Par défaut: locale de l'appareil.
-     */
-    locale?: string;
-    /**
-     * Profil de routing Mapbox.
-     * iOS: "mapbox/driving-traffic" | "mapbox/driving" | "mapbox/walking" | "mapbox/cycling"
-     * Android: "driving-traffic" | "driving" | "walking" | "cycling" (sans "mapbox/" prefix)
-     * Défaut: "mapbox/driving-traffic"
-     */
-    routeProfile?: string;
-    /**
-     * Types de routes à exclure du calcul d'itinéraire.
-     * Exemples: ["toll", "ferry", "motorway"]
-     */
-    routeExcludeList?: string[];
-    /**
-     * Style de la carte Mapbox.
-     * Exemples: "mapbox://styles/mapbox/navigation-day-v1"
-     */
-    mapStyle?: string;
-    /**
-     * Coupe le son de navigation au démarrage.
-     * Défaut: false
-     */
-    mute?: boolean;
-    /**
-     * Hauteur maximale du véhicule en mètres.
-     * Permet d'éviter les routes avec restriction de hauteur.
-     */
-    vehicleMaxHeight?: number;
-    /**
-     * Largeur maximale du véhicule en mètres.
-     * Permet d'éviter les routes avec restriction de largeur.
-     */
-    vehicleMaxWidth?: number;
-    /**
-     * URL d'une source raster personnalisée pour la carte.
-     * Doit être une URL template avec {x}, {y}, {z}.
-     * Exemple: "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
-     */
-    customRasterSourceUrl?: string;
-    /**
-     * ID du layer au-dessus duquel placer le layer raster personnalisé.
-     */
-    placeCustomRasterLayerAbove?: string;
-    /**
-     * Désactive le calcul et l'affichage des routes alternatives.
-     * Défaut: false
-     */
-    disableAlternativeRoutes?: boolean;
-    /**
-     * Affiche l'UI de feedback en fin de route.
-     * Défaut: false
-     */
-    showsEndOfRouteFeedback?: boolean;
-    /**
-     * Appelé régulièrement avec la progression sur la route.
-     * L'objet est dans event.nativeEvent.
-     */
-    onRouteProgressChanged?: (event: NativeRouteProgressEvent) => void;
-    /**
-     * Appelé quand l'utilisateur arrive à un waypoint intermédiaire.
-     * Sur Android uniquement: fournit les données de progression dans event.nativeEvent.
-     */
-    onWaypointArrival?: (event: NativeWaypointEvent) => void;
-    /**
-     * Appelé quand l'utilisateur arrive à la destination finale.
-     */
-    onFinalDestinationArrival?: () => void;
-    /**
-     * Appelé quand l'utilisateur appuie sur le bouton d'annulation.
-     * La navigation ne se ferme pas automatiquement — gérer manuellement (ex: navigation.goBack()).
-     */
-    onCancelNavigation?: (event?: any) => void;
-    /**
-     * Appelé quand la route change ou qu'un reroutage est effectué.
-     */
-    onRouteChanged?: () => void;
-    /**
-     * Appelé quand l'utilisateur sort de la route.
-     */
-    onUserOffRoute?: () => void;
-    /**
-     * Appelé quand les routes sont chargées et prêtes.
-     */
-    onRoutesLoaded?: () => void;
-}

package/build/MapboxNavigation.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/build/MapboxNavigationView.d.ts

@@ -1,30 +0,0 @@
-import React from 'react';
-import type { MapboxNavigationViewProps } from './MapboxNavigation.types';
-/**
- * MapboxNavigationView
- *
- * Composant de navigation Mapbox turn-by-turn pour Expo SDK 53+.
- * Requiert Expo Dev Client (incompatible avec Expo Go).
- *
- * @example
- * ```tsx
- * <MapboxNavigationView
- *   style={{ flex: 1 }}
- *   coordinates={[
- *     { latitude: 48.8566, longitude: 2.3522 },   // Paris (départ)
- *     { latitude: 45.7640, longitude: 4.8357 },   // Lyon (waypoint)
- *     { latitude: 43.2965, longitude: 5.3698 },   // Marseille (destination)
- *   ]}
- *   locale="fr"
- *   vehicleMaxHeight={5.0}
- *   vehicleMaxWidth={2.5}
- *   onRouteProgressChanged={(event) => {
- *     const { distanceRemaining, durationRemaining } = event.nativeEvent;
- *     console.log(`${(distanceRemaining / 1000).toFixed(1)} km restants`);
- *   }}
- *   onFinalDestinationArrival={() => console.log('Arrivé !')}
- *   onCancelNavigation={() => navigation.goBack()}
- * />
- * ```
- */
-export default function MapboxNavigationView(props: MapboxNavigationViewProps): React.JSX.Element;

package/build/MapboxNavigationView.js

@@ -1,41 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = MapboxNavigationView;
-const react_1 = __importDefault(require("react"));
-const expo_modules_core_1 = require("expo-modules-core");
-const NativeView = (0, expo_modules_core_1.requireNativeViewManager)('ExpoMapboxNavigation');
-/**
- * MapboxNavigationView
- *
- * Composant de navigation Mapbox turn-by-turn pour Expo SDK 53+.
- * Requiert Expo Dev Client (incompatible avec Expo Go).
- *
- * @example
- * ```tsx
- * <MapboxNavigationView
- *   style={{ flex: 1 }}
- *   coordinates={[
- *     { latitude: 48.8566, longitude: 2.3522 },   // Paris (départ)
- *     { latitude: 45.7640, longitude: 4.8357 },   // Lyon (waypoint)
- *     { latitude: 43.2965, longitude: 5.3698 },   // Marseille (destination)
- *   ]}
- *   locale="fr"
- *   vehicleMaxHeight={5.0}
- *   vehicleMaxWidth={2.5}
- *   onRouteProgressChanged={(event) => {
- *     const { distanceRemaining, durationRemaining } = event.nativeEvent;
- *     console.log(`${(distanceRemaining / 1000).toFixed(1)} km restants`);
- *   }}
- *   onFinalDestinationArrival={() => console.log('Arrivé !')}
- *   onCancelNavigation={() => navigation.goBack()}
- * />
- * ```
- */
-function MapboxNavigationView(props) {
-    return (<NativeView 
-    // Valeurs par défaut
-    mute={false} useRouteMatchingApi={false} disableAlternativeRoutes={false} showsEndOfRouteFeedback={false} waypointIndices={[]} routeExcludeList={[]} {...props}/>);
-}

package/ios/ExpoMapboxNavigation.podspec

@@ -1,25 +0,0 @@
-Pod::Spec.new do |s|
-  s.name           = 'ExpoMapboxNavigation'
-  s.version        = '1.0.0'
-  s.summary        = 'Expo module for Mapbox turn-by-turn navigation — iOS & Android'
-  s.homepage       = 'https://github.com/YOUR_GITHUB/expo-mapbox-navigation'
-  s.license        = { :type => 'MIT' }
-  s.authors        = { 'Your Name' => 'you@example.com' }
-  s.platforms      = { :ios => '14.0' }
-  s.swift_version  = '5.7'
-  s.source         = { :git => '' }
-
-  s.static_framework = true
-
-  s.dependency 'ExpoModulesCore'
-  # MapboxNavigationUIKit + MapboxNavigationCore are bundled as .xcframework
-  # See README for how to build them from source
-
-  s.source_files   = '*.{swift,h,m,mm,cpp}'
-  s.preserve_paths = 'Frameworks/**/*'
-
-  s.pod_target_xcconfig = {
-    'FRAMEWORK_SEARCH_PATHS' => '$(inherited) $(PODS_TARGET_SRCROOT)/Frameworks/**',
-    'OTHER_LDFLAGS' => '$(inherited) -framework MapboxNavigationUIKit -framework MapboxNavigationCore -framework MapboxNavigationNative -framework MapboxDirections'
-  }
-end