@jacques_gordon/expo-mapbox-navigation 1.0.8 → 2.0.1

package/app.plugin.js

@@ -1 +1,216 @@
-module.exports = require('./plugin/index').default;
+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/build/index.d.ts

@@ -1,2 +1,121 @@
-export { default as MapboxNavigationView } from './MapboxNavigationView';
-export type { MapboxNavigationViewProps, Coordinate, RouteProgress, NativeRouteProgressEvent, NativeWaypointEvent, } from './MapboxNavigation.types';
+import { ViewStyle } from 'react-native';
+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;
+    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;
+}
+/**
+ * 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 declare function MapboxNavigationView(props: MapboxNavigationViewProps): any;
+export default MapboxNavigationView;

package/build/index.js

@@ -3,6 +3,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MapboxNavigationView = void 0;
-var MapboxNavigationView_1 = require("./MapboxNavigationView");
-Object.defineProperty(exports, "MapboxNavigationView", { enumerable: true, get: function () { return __importDefault(MapboxNavigationView_1).default; } });
+exports.MapboxNavigationView = MapboxNavigationView;
+const expo_modules_core_1 = require("expo-modules-core");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+// ─────────────────────────────────────────────────────────────────────────────
+// Native view
+// ─────────────────────────────────────────────────────────────────────────────
+const NativeView = (0, expo_modules_core_1.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!')}
+ * />
+ * ```
+ */
+function MapboxNavigationView(props) {
+    return (react_1.default.createElement(NativeView, { ...props, style: [styles.fullSize, props.style] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    fullSize: { flex: 1 },
+});
+exports.default = MapboxNavigationView;

package/build/src/index.d.ts

@@ -0,0 +1,121 @@
+import { ViewStyle } from 'react-native';
+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;
+    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;
+}
+/**
+ * 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 declare function MapboxNavigationView(props: MapboxNavigationViewProps): any;
+export default MapboxNavigationView;

package/build/src/index.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapboxNavigationView = MapboxNavigationView;
+const expo_modules_core_1 = require("expo-modules-core");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+// ─────────────────────────────────────────────────────────────────────────────
+// Native view
+// ─────────────────────────────────────────────────────────────────────────────
+const NativeView = (0, expo_modules_core_1.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!')}
+ * />
+ * ```
+ */
+function MapboxNavigationView(props) {
+    return (react_1.default.createElement(NativeView, { ...props, style: [styles.fullSize, props.style] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    fullSize: { flex: 1 },
+});
+exports.default = MapboxNavigationView;

package/package.json

@@ -1,64 +1,64 @@
 {
   "name": "@jacques_gordon/expo-mapbox-navigation",
-  "version": "1.0.8",
-  "description": "Expo module for Mapbox turn-by-turn navigation — iOS & Android, compatible with Expo SDK 53 Dev Client",
+  "version": "2.0.1",
+  "description": "Expo module for Mapbox Navigation SDK with 16KB page size support, NDK27, and Mapbox Maps v11.11.0+",
   "main": "build/index.js",
   "types": "build/index.d.ts",
-  "files": [
-    "build",
-    "ios",
-    "android",
-    "plugin",
-    "app.plugin.js",
-    "expo-module.config.json",
-    "README.md"
-  ],
   "scripts": {
-    "build": "expo-module build",
-    "clean": "expo-module clean",
-    "lint": "expo-module lint",
-    "typecheck": "tsc --noEmit",
-    "prepare": "expo-module prepare",
-    "prepublishOnly": "expo-module prepublishOnly"
+    "build": "tsc -p tsconfig.json",
+    "clean": "rm -rf build",
+    "lint": "tsc --noEmit",
+    "test": "echo \"Tests require a full Expo project with EAS Build. See README.\"",
+    "prepublishOnly": "npm run build"
   },
   "keywords": [
     "expo",
     "mapbox",
     "navigation",
-    "turn-by-turn",
     "react-native",
-    "expo-module",
-    "gps",
-    "waypoints"
+    "maps",
+    "directions",
+    "16kb-page-size",
+    "ndk27"
   ],
-  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jacquesngomeheffa/expo-mapbox-navigation.git"
+    "url": "https://github.com/jacques_gordon/expo-mapbox-navigation.git"
   },
   "bugs": {
-    "url": "https://github.com/jacquesngomeheffa/expo-mapbox-navigation/issues"
+    "url": "https://github.com/jacques_gordon/expo-mapbox-navigation/issues"
   },
-  "homepage": "https://github.com/jacquesngomeheffa/expo-mapbox-navigation#readme",
+  "author": "Jacques Gordon",
+  "license": "MIT",
+  "homepage": "https://github.com/jacques_gordon/expo-mapbox-navigation#readme",
   "peerDependencies": {
     "expo": ">=53.0.0",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "@rnmapbox/maps": ">=10.1.0"
   },
   "devDependencies": {
-    "@expo/config-plugins": "^9.0.0",
-    "@types/react": "^19.2.17",
-    "expo-module-scripts": "^56.0.3",
-    "expo-modules-core": "^2.0.0",
-    "tsup": "^8.5.1",
+    "expo-module-scripts": "^3.5.0",
     "typescript": "^5.3.0"
   },
+  "dependencies": {
+    "expo-modules-core": ">=2.0.0"
+  },
   "expo": {
-    "fyi": "https://expo.fyi/",
-    "config": "./plugin/build/index.js"
+    "fyi": "https://github.com/jacques_gordon/expo-mapbox-navigation"
   },
-  "dependencies": {
-    "react": "^19.2.7",
-    "react-native": "^0.86.0"
+  "files": [
+    "android",
+    "ios",
+    "src",
+    "build",
+    "plugin",
+    "*.podspec",
+    "app.plugin.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
   }
-}
+}