@jacques_gordon/expo-mapbox-navigation 1.0.0

package/README.md

@@ -0,0 +1,270 @@
+# @jacques_gordon/expo-mapbox-navigation
+
+Plugin Expo pour la navigation Mapbox **turn-by-turn**, compatible **Expo SDK 53** avec **Expo Dev Client**.
+
+Supporte **iOS** et **Android**, avec waypoints multiples, instructions vocales, reroutage automatique, restrictions de gabarit de véhicule et personnalisation de la carte.
+
+> ⚠️ Nécessite **Expo Dev Client** — incompatible avec Expo Go.
+
+---
+
+## Fonctionnalités
+
+- ✅ Navigation turn-by-turn complète (iOS & Android)
+- ✅ Waypoints multiples
+- ✅ Instructions vocales
+- ✅ Reroutage automatique
+- ✅ Détection hors-route
+- ✅ Restrictions de gabarit de véhicule (hauteur / largeur)
+- ✅ Map Matching API (trajet explicite selon les coordonnées)
+- ✅ Routes alternatives
+- ✅ Style de carte personnalisable
+- ✅ Couche raster personnalisée
+- ✅ Multilangue
+- ✅ Compatible avec `@rnmapbox/maps`
+
+---
+
+## Installation
+
+### 1. Installer `@rnmapbox/maps` (dépendance requise)
+
+Suivre les [instructions officielles de @rnmapbox/maps](https://rnmapbox.github.io/docs/install).  
+La version recommandée est `11.11.0`. **Important : définir explicitement `RNMapboxMapsVersion`.**
+
+### 2. Installer le package
+
+```bash
+npm install @jacques_gordon/expo-mapbox-navigation
+```
+
+### 3. Configurer le plugin dans `app.json`
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "expo-build-properties",
+        {
+          "ios": {
+            "useFrameworks": "static"
+          }
+        }
+      ],
+      [
+        "@jacques_gordon/expo-mapbox-navigation",
+        {
+          "accessToken": "pk.eyJ1IjoiVk9UUkVfVE9LRU4iLCJhIjoiY...",
+          "mapboxMapsVersion": "11.11.0",
+          "androidColorOverrides": {
+            "mapbox_main_maneuver_background_color": "#1E88E5"
+          }
+        }
+      ]
+    ]
+  }
+}
+```
+
+### 4. Configurer les tokens secrets
+
+#### iOS — `~/.netrc`
+
+```
+machine api.mapbox.com
+  login mapbox
+  password sk.eyJ1IjoiVk9UUkVfVE9LRU5fU0VDUkVUIiwiYSI6Ii4uLiJ9...
+```
+
+#### Android — `~/.gradle/gradle.properties`
+
+```properties
+MAPBOX_DOWNLOADS_TOKEN=sk.eyJ1IjoiVk9UUkVfVE9LRU5fU0VDUkVUIiwiYSI6Ii4uLiJ9...
+```
+
+### 5. Prebuild + Dev Client
+
+```bash
+npx expo prebuild --clean
+npx expo run:ios     # ou run:android
+```
+
+---
+
+## Utilisation
+
+### Exemple de base
+
+```tsx
+import { MapboxNavigationView } from '@jacques_gordon/expo-mapbox-navigation';
+
+export default function NavigationScreen() {
+  return (
+    <MapboxNavigationView
+      style={{ flex: 1 }}
+      coordinates={[
+        { latitude: 48.8566, longitude: 2.3522 },  // Paris — départ
+        { latitude: 43.2965, longitude: 5.3698 },  // Marseille — destination
+      ]}
+      locale="fr"
+      onFinalDestinationArrival={() => console.log('Arrivé !')}
+      onCancelNavigation={() => navigation.goBack()}
+    />
+  );
+}
+```
+
+### Exemple complet (compatible avec la page de navigation)
+
+```tsx
+import { MapboxNavigationView } from '@jacques_gordon/expo-mapbox-navigation';
+
+export default function NavigationScreen({ navigation, reservation, currentPosition }) {
+  const coordinates = [
+    currentPosition,                              // départ (position actuelle)
+    { latitude: 45.7640, longitude: 4.8357 },    // Lyon — waypoint intermédiaire
+    reservation.address_to_lat_long,              // destination finale
+  ];
+
+  return (
+    <MapboxNavigationView
+      style={{ flex: 1 }}
+      coordinates={coordinates}
+      locale="fr"
+      vehicleMaxHeight={5.0}
+      vehicleMaxWidth={2.5}
+      showsEndOfRouteFeedback
+      onRouteProgressChanged={async (event) => {
+        const { distanceRemaining, durationRemaining, distanceTraveled, fractionTraveled } =
+          event.nativeEvent;
+
+        // Notifier le client que le chauffeur approche
+        if (distanceRemaining <= 60) {
+          AXIOS_POST('reservations/livetracking/drivernear', { reservation });
+        }
+
+        const eta = new Date(Date.now() + durationRemaining * 1000);
+        dispatch(setNavigationData({ eta, distanceRemaining, durationRemaining }));
+      }}
+      onWaypointArrival={(event) => {
+        console.log('Waypoint atteint !', event.nativeEvent);
+      }}
+      onFinalDestinationArrival={async () => {
+        await playSound(SOUNDS.ROAD_RECALCULATE);
+        showToast({ toast_type: 'validation', title: 'Arrivée', body: 'Destination atteinte !' });
+      }}
+      onCancelNavigation={() => navigation.goBack()}
+      onRouteChanged={() => console.log('Reroutage en cours...')}
+      onUserOffRoute={() => console.log('Hors route !')}
+      onRoutesLoaded={() => console.log('Routes chargées')}
+    />
+  );
+}
+```
+
+---
+
+## Props
+
+### Route
+
+| Prop | Type | Requis | Description |
+|------|------|--------|-------------|
+| `coordinates` | `Coordinate[]` | **Oui** | Tableau de `{latitude, longitude}`. Minimum 2 points. |
+| `waypointIndices` | `number[]` | Non | Indices des points considérés comme waypoints. Par défaut: tous. |
+
+### Options de routing
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `locale` | `string` | locale appareil | Langue des instructions. Ex: `"fr"`, `"en"`, `"de"` |
+| `routeProfile` | `string` | `"mapbox/driving-traffic"` | Profil de routing. Android: sans `"mapbox/"`. |
+| `routeExcludeList` | `string[]` | `[]` | Routes à exclure: `"toll"`, `"ferry"`, `"motorway"` |
+| `useRouteMatchingApi` | `boolean` | `false` | Utilise l'API Map Matching au lieu de l'API Directions |
+| `disableAlternativeRoutes` | `boolean` | `false` | Désactive les routes alternatives |
+| `mute` | `boolean` | `false` | Coupe le son de navigation au démarrage |
+| `vehicleMaxHeight` | `number` | — | Hauteur max du véhicule en mètres |
+| `vehicleMaxWidth` | `number` | — | Largeur max du véhicule en mètres |
+
+### Personnalisation visuelle
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `mapStyle` | `string` | style par défaut | URL du style Mapbox |
+| `customRasterSourceUrl` | `string` | — | URL template raster personnalisée (ex: OpenStreetMap) |
+| `placeCustomRasterLayerAbove` | `string` | — | ID du layer au-dessus duquel placer la couche raster |
+| `showsEndOfRouteFeedback` | `boolean` | `false` | Affiche l'UI de feedback à l'arrivée |
+
+### Callbacks
+
+| Prop | Paramètres | Description |
+|------|-----------|-------------|
+| `onRouteProgressChanged` | `{ nativeEvent: RouteProgress }` | Progression sur la route (appelé fréquemment) |
+| `onWaypointArrival` | `{ nativeEvent: RouteProgress }` (Android only) | Arrivée à un waypoint intermédiaire |
+| `onFinalDestinationArrival` | — | Arrivée à la destination finale |
+| `onCancelNavigation` | — | Annulation de la navigation par l'utilisateur |
+| `onRouteChanged` | — | Route modifiée ou reroutage |
+| `onUserOffRoute` | — | L'utilisateur est sorti de la route |
+| `onRoutesLoaded` | — | Routes chargées et prêtes |
+
+---
+
+## Types TypeScript
+
+```ts
+interface Coordinate {
+  latitude: number;
+  longitude: number;
+}
+
+interface RouteProgress {
+  distanceRemaining: number;   // mètres restants
+  distanceTraveled: number;    // mètres parcourus
+  durationRemaining: number;   // secondes restantes
+  fractionTraveled: number;    // 0.0 → 1.0
+}
+```
+
+---
+
+## Plugin `app.json` — Options complètes
+
+```json
+[
+  "@jacques_gordon/expo-mapbox-navigation",
+  {
+    "accessToken": "pk.eyJ1...",
+    "mapboxMapsVersion": "11.11.0",
+    "androidColorOverrides": {
+      "mapbox_main_maneuver_background_color": "#1E88E5",
+      "mapbox_sub_maneuver_background_color": "#1565C0",
+      "mapbox_banner_background_color": "#FFFFFF"
+    }
+  }
+]
+```
+
+## Notes importantes
+
+- Nécessite **Expo Dev Client** (Expo Go non supporté)
+- iOS minimum : **14.0**
+- Android minimum SDK : **24**
+- Le SDK Mapbox Navigation est propriétaire — facturation via votre compte Mapbox
+- Pour iOS, les `.xcframework` du SDK Mapbox Navigation doivent être compilés et inclus dans `ios/Frameworks/`
+  (voir [instructions dans le README du repo source](https://github.com/uju777/expo-mapbox-navigation))
+
+---
+
+## Obtenir vos tokens Mapbox
+
+1. Créer un compte sur [mapbox.com](https://www.mapbox.com/)
+2. Aller dans [Account > Tokens](https://account.mapbox.com/access-tokens/)
+3. **Token public** (`pk.eyJ1...`) — token par défaut ou nouveau token
+4. **Token secret** (`sk.eyJ1...`) — nouveau token avec le scope `Downloads:Read`
+
+---
+
+## Licence
+
+MIT

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

@@ -0,0 +1,2 @@
+#Sat Jun 27 20:48:59 CEST 2026
+gradle.version=8.9

package/android/build.gradle

@@ -0,0 +1,54 @@
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+apply plugin: 'maven-publish'
+
+buildscript {
+  def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+  if (expoModulesCorePlugin.exists()) {
+    apply from: expoModulesCorePlugin
+    applyKotlinExpoModulesCorePlugin()
+  }
+}
+
+android {
+  compileSdkVersion 34
+  namespace "expo.modules.mapboxnavigation"
+
+  defaultConfig {
+    minSdkVersion 24
+    targetSdkVersion 34
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+
+  kotlinOptions {
+    jvmTarget = "17"
+  }
+}
+
+repositories {
+  maven {
+    url 'https://api.mapbox.com/downloads/v2/releases/maven'
+    authentication {
+      basic(BasicAuthentication)
+    }
+    credentials {
+      username = "mapbox"
+      password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: System.getenv("MAPBOX_DOWNLOADS_TOKEN") ?: ""
+    }
+  }
+  google()
+  mavenCentral()
+}
+
+dependencies {
+  implementation project(':expo-modules-core')
+  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:${kotlinVersion()}"
+
+  // Mapbox Navigation SDK v3 + Drop-in UI
+  api "com.mapbox.navigation:android:3.3.0"
+  api "com.mapbox.navigation:ui-dropin:3.3.0"
+}

package/android/src/main/java/expo/modules/mapboxnavigation/ExpoMapboxNavigationModule.kt

@@ -0,0 +1,85 @@
+package expo.modules.mapboxnavigation
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class ExpoMapboxNavigationModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ExpoMapboxNavigation")
+
+    View(ExpoMapboxNavigationView::class) {
+
+      // ─── Props ──────────────────────────────────────────────────────
+
+      Prop("coordinates") { view: ExpoMapboxNavigationView, value: List<Map<String, Double>> ->
+        view.coordinates = value
+        view.startNavigationIfReady()
+      }
+
+      Prop("waypointIndices") { view: ExpoMapboxNavigationView, value: List<Int> ->
+        view.waypointIndices = value
+      }
+
+      Prop("useRouteMatchingApi") { view: ExpoMapboxNavigationView, value: Boolean ->
+        view.useRouteMatchingApi = value
+      }
+
+      Prop("locale") { view: ExpoMapboxNavigationView, value: String ->
+        view.locale = value
+      }
+
+      Prop("routeProfile") { view: ExpoMapboxNavigationView, value: String ->
+        // Android: sans le préfixe "mapbox/"
+        view.routeProfile = value.removePrefix("mapbox/")
+      }
+
+      Prop("routeExcludeList") { view: ExpoMapboxNavigationView, value: List<String> ->
+        view.routeExcludeList = value
+      }
+
+      Prop("mapStyle") { view: ExpoMapboxNavigationView, value: String ->
+        view.mapStyle = value
+      }
+
+      Prop("mute") { view: ExpoMapboxNavigationView, value: Boolean ->
+        view.mute = value
+      }
+
+      Prop("vehicleMaxHeight") { view: ExpoMapboxNavigationView, value: Double ->
+        view.vehicleMaxHeight = value
+      }
+
+      Prop("vehicleMaxWidth") { view: ExpoMapboxNavigationView, value: Double ->
+        view.vehicleMaxWidth = value
+      }
+
+      Prop("customRasterSourceUrl") { view: ExpoMapboxNavigationView, value: String ->
+        view.customRasterSourceUrl = value
+      }
+
+      Prop("placeCustomRasterLayerAbove") { view: ExpoMapboxNavigationView, value: String ->
+        view.placeCustomRasterLayerAbove = value
+      }
+
+      Prop("disableAlternativeRoutes") { view: ExpoMapboxNavigationView, value: Boolean ->
+        view.disableAlternativeRoutes = value
+      }
+
+      Prop("showsEndOfRouteFeedback") { view: ExpoMapboxNavigationView, value: Boolean ->
+        view.showsEndOfRouteFeedback = value
+      }
+
+      // ─── Events ─────────────────────────────────────────────────────
+
+      Events(
+        "onRouteProgressChanged",
+        "onWaypointArrival",
+        "onFinalDestinationArrival",
+        "onCancelNavigation",
+        "onRouteChanged",
+        "onUserOffRoute",
+        "onRoutesLoaded"
+      )
+    }
+  }
+}

package/android/src/main/java/expo/modules/mapboxnavigation/ExpoMapboxNavigationView.kt

@@ -0,0 +1,184 @@
+package expo.modules.mapboxnavigation
+
+import android.content.Context
+import android.view.ViewGroup
+import com.mapbox.api.directions.v5.DirectionsCriteria
+import com.mapbox.api.directions.v5.models.RouteOptions
+import com.mapbox.geojson.Point
+import com.mapbox.navigation.base.extensions.applyDefaultNavigationOptions
+import com.mapbox.navigation.base.extensions.applyLanguageAndVoiceUnitOptions
+import com.mapbox.navigation.base.route.NavigationRoute
+import com.mapbox.navigation.base.route.NavigationRouterCallback
+import com.mapbox.navigation.base.route.RouterFailure
+import com.mapbox.navigation.base.route.RouterOrigin
+import com.mapbox.navigation.base.trip.model.RouteProgress
+import com.mapbox.navigation.base.trip.model.RouteProgressState
+import com.mapbox.navigation.core.MapboxNavigation
+import com.mapbox.navigation.core.MapboxNavigationProvider
+import com.mapbox.navigation.core.directions.session.RoutesObserver
+import com.mapbox.navigation.core.lifecycle.MapboxNavigationApp
+import com.mapbox.navigation.core.trip.session.RouteProgressObserver
+import com.mapbox.navigation.dropin.NavigationView
+import com.mapbox.navigation.dropin.map.MapStyleLoader
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ExpoView
+import java.util.Locale
+
+class ExpoMapboxNavigationView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+
+  // ─── Props ──────────────────────────────────────────────────────────────
+  var coordinates: List<Map<String, Double>> = emptyList()
+  var waypointIndices: List<Int> = emptyList()
+  var useRouteMatchingApi: Boolean = false
+  var locale: String = ""
+  var routeProfile: String = "driving-traffic"
+  var routeExcludeList: List<String> = emptyList()
+  var mapStyle: String? = null
+  var mute: Boolean = false
+  var vehicleMaxHeight: Double? = null
+  var vehicleMaxWidth: Double? = null
+  var customRasterSourceUrl: String? = null
+  var placeCustomRasterLayerAbove: String? = null
+  var disableAlternativeRoutes: Boolean = false
+  var showsEndOfRouteFeedback: Boolean = false
+
+  // ─── Events ─────────────────────────────────────────────────────────────
+  private val onRouteProgressChanged by lazy { appContext.eventDispatcher("onRouteProgressChanged") }
+  private val onWaypointArrival by lazy { appContext.eventDispatcher("onWaypointArrival") }
+  private val onFinalDestinationArrival by lazy { appContext.eventDispatcher("onFinalDestinationArrival") }
+  private val onCancelNavigation by lazy { appContext.eventDispatcher("onCancelNavigation") }
+  private val onRouteChanged by lazy { appContext.eventDispatcher("onRouteChanged") }
+  private val onUserOffRoute by lazy { appContext.eventDispatcher("onUserOffRoute") }
+  private val onRoutesLoaded by lazy { appContext.eventDispatcher("onRoutesLoaded") }
+
+  // ─── Internal ───────────────────────────────────────────────────────────
+  private var navigationView: NavigationView? = null
+  private var isStarted = false
+  private var currentWaypointIndex = 0
+  private var mapboxNavigation: MapboxNavigation? = null
+
+  fun startNavigationIfReady() {
+    if (coordinates.size >= 2 && !isStarted) {
+      isStarted = true
+      post { setupNavigationView() }
+    }
+  }
+
+  private fun setupNavigationView() {
+    val activity = context as? androidx.fragment.app.FragmentActivity ?: return
+
+    // Créer la NavigationView (drop-in UI Mapbox)
+    val navView = NavigationView(context).also {
+      it.layoutParams = ViewGroup.LayoutParams(
+        ViewGroup.LayoutParams.MATCH_PARENT,
+        ViewGroup.LayoutParams.MATCH_PARENT
+      )
+    }
+    navigationView = navView
+    addView(navView)
+
+    // Observer la progression
+    navView.registerRouteProgressObserver(object : RouteProgressObserver {
+      override fun onRouteProgressChanged(routeProgress: RouteProgress) {
+        val progressData = mapOf(
+          "distanceRemaining" to routeProgress.distanceRemaining,
+          "distanceTraveled" to routeProgress.distanceTraveled,
+          "durationRemaining" to routeProgress.durationRemaining,
+          "fractionTraveled" to routeProgress.fractionTraveled
+        )
+
+        onRouteProgressChanged.emit(progressData)
+
+        // Arrivée à un waypoint intermédiaire
+        if (routeProgress.currentState == RouteProgressState.COMPLETE) {
+          val legIndex = routeProgress.currentLegProgress?.legIndex ?: 0
+          val totalLegs = routeProgress.navigationRoute?.directionsRoute?.legs()?.size ?: 1
+
+          if (legIndex < totalLegs - 1) {
+            onWaypointArrival.emit(progressData)
+          } else {
+            onFinalDestinationArrival.emit(emptyMap<String, Any>())
+          }
+        }
+      }
+    })
+
+    // Observer les changements de route (reroutage)
+    navView.registerRoutesObserver(object : RoutesObserver {
+      override fun onRoutesChanged(result: RoutesObserver.RoutesUpdatedResult) {
+        if (result.navigationRoutes.isNotEmpty()) {
+          onRouteChanged.emit(emptyMap<String, Any>())
+        }
+      }
+    })
+
+    // Construire et lancer la route
+    requestRoute(navView)
+  }
+
+  private fun requestRoute(navView: NavigationView) {
+    val points = coordinates.mapNotNull { coord ->
+      val lat = coord["latitude"] ?: return@mapNotNull null
+      val lng = coord["longitude"] ?: return@mapNotNull null
+      Point.fromLngLat(lng, lat)
+    }
+    if (points.size < 2) return
+
+    val origin = points.first()
+    val destination = points.last()
+    val waypoints = if (points.size > 2) points.subList(1, points.size - 1) else emptyList()
+
+    val resolvedLocale = if (locale.isNotEmpty()) Locale(locale) else Locale.getDefault()
+
+    val profile = when (routeProfile) {
+      "driving" -> DirectionsCriteria.PROFILE_DRIVING
+      "walking" -> DirectionsCriteria.PROFILE_WALKING
+      "cycling" -> DirectionsCriteria.PROFILE_CYCLING
+      else -> DirectionsCriteria.PROFILE_DRIVING_TRAFFIC
+    }
+
+    val routeOptionsBuilder = RouteOptions.builder()
+      .applyDefaultNavigationOptions(profile)
+      .applyLanguageAndVoiceUnitOptions(context)
+      .language(resolvedLocale.language)
+      .coordinatesList(listOf(origin) + waypoints + listOf(destination))
+
+    if (!disableAlternativeRoutes) {
+      routeOptionsBuilder.alternatives(true)
+    }
+
+    if (routeExcludeList.isNotEmpty()) {
+      routeOptionsBuilder.exclude(routeExcludeList.joinToString(","))
+    }
+
+    vehicleMaxHeight?.let { routeOptionsBuilder.maxHeight(it) }
+    vehicleMaxWidth?.let { routeOptionsBuilder.maxWidth(it) }
+
+    MapboxNavigationApp.current()?.requestRoutes(
+      routeOptionsBuilder.build(),
+      object : NavigationRouterCallback {
+        override fun onRoutesReady(routes: List<NavigationRoute>, routerOrigin: RouterOrigin) {
+          onRoutesLoaded.emit(emptyMap<String, Any>())
+          MapboxNavigationApp.current()?.setNavigationRoutes(routes)
+          navView.api.startActiveGuidance(routes)
+        }
+
+        override fun onFailure(reasons: List<RouterFailure>, routeOptions: RouteOptions) {
+          android.util.Log.e("ExpoMapboxNavigation", "Erreur route: ${reasons.firstOrNull()?.message}")
+        }
+
+        override fun onCanceled(routeOptions: RouteOptions, routerOrigin: RouterOrigin) {}
+      }
+    )
+
+    // Bouton d'annulation
+    navView.addOnClickListener {
+      onCancelNavigation.emit(emptyMap<String, Any>())
+    }
+  }
+
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    MapboxNavigationApp.current()?.setNavigationRoutes(emptyList())
+  }
+}

package/app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./plugin/build/index').default;

package/build/MapboxNavigation.types.d.ts

@@ -0,0 +1,132 @@
+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

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

package/build/MapboxNavigationView.d.ts

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,41 @@
+"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/build/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MapboxNavigationView } from './MapboxNavigationView';
+export type { MapboxNavigationViewProps, Coordinate, RouteProgress, NativeRouteProgressEvent, NativeWaypointEvent, } from './MapboxNavigation.types';

package/build/index.js

@@ -0,0 +1,8 @@
+"use strict";
+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; } });

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["ios", "android"],
+  "android": {
+    "modules": ["expo.modules.mapboxnavigation.ExpoMapboxNavigationModule"]
+  },
+  "ios": {
+    "modules": ["ExpoMapboxNavigationModule"]
+  }
+}

package/ios/ExpoMapboxNavigation.podspec

@@ -0,0 +1,25 @@
+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

package/ios/ExpoMapboxNavigationModule.swift

@@ -0,0 +1,81 @@
+import ExpoModulesCore
+
+public class ExpoMapboxNavigationModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoMapboxNavigation")
+
+    View(ExpoMapboxNavigationView.self) {
+
+      // ─── Props ────────────────────────────────────────────────────────
+
+      Prop("coordinates") { (view: ExpoMapboxNavigationView, value: [[String: Double]]) in
+        view.coordinates = value
+        view.startNavigationIfReady()
+      }
+
+      Prop("waypointIndices") { (view: ExpoMapboxNavigationView, value: [Int]) in
+        view.waypointIndices = value
+      }
+
+      Prop("useRouteMatchingApi") { (view: ExpoMapboxNavigationView, value: Bool) in
+        view.useRouteMatchingApi = value
+      }
+
+      Prop("locale") { (view: ExpoMapboxNavigationView, value: String) in
+        view.locale = value
+      }
+
+      Prop("routeProfile") { (view: ExpoMapboxNavigationView, value: String) in
+        view.routeProfile = value
+      }
+
+      Prop("routeExcludeList") { (view: ExpoMapboxNavigationView, value: [String]) in
+        view.routeExcludeList = value
+      }
+
+      Prop("mapStyle") { (view: ExpoMapboxNavigationView, value: String) in
+        view.mapStyle = value
+      }
+
+      Prop("mute") { (view: ExpoMapboxNavigationView, value: Bool) in
+        view.mute = value
+      }
+
+      Prop("vehicleMaxHeight") { (view: ExpoMapboxNavigationView, value: Double) in
+        view.vehicleMaxHeight = value
+      }
+
+      Prop("vehicleMaxWidth") { (view: ExpoMapboxNavigationView, value: Double) in
+        view.vehicleMaxWidth = value
+      }
+
+      Prop("customRasterSourceUrl") { (view: ExpoMapboxNavigationView, value: String) in
+        view.customRasterSourceUrl = value
+      }
+
+      Prop("placeCustomRasterLayerAbove") { (view: ExpoMapboxNavigationView, value: String) in
+        view.placeCustomRasterLayerAbove = value
+      }
+
+      Prop("disableAlternativeRoutes") { (view: ExpoMapboxNavigationView, value: Bool) in
+        view.disableAlternativeRoutes = value
+      }
+
+      Prop("showsEndOfRouteFeedback") { (view: ExpoMapboxNavigationView, value: Bool) in
+        view.showsEndOfRouteFeedback = value
+      }
+
+      // ─── Events ───────────────────────────────────────────────────────
+
+      Events(
+        "onRouteProgressChanged",
+        "onWaypointArrival",
+        "onFinalDestinationArrival",
+        "onCancelNavigation",
+        "onRouteChanged",
+        "onUserOffRoute",
+        "onRoutesLoaded"
+      )
+    }
+  }
+}

package/ios/ExpoMapboxNavigationView.swift

@@ -0,0 +1,236 @@
+import ExpoModulesCore
+import MapboxNavigationCore
+import MapboxNavigationUIKit
+import MapboxMaps
+import MapboxDirections
+
+class ExpoMapboxNavigationView: ExpoView {
+
+  // ─── Props ──────────────────────────────────────────────────────────────
+  var coordinates: [[String: Double]] = []
+  var waypointIndices: [Int] = []
+  var useRouteMatchingApi: Bool = false
+  var locale: String = ""
+  var routeProfile: String = "mapbox/driving-traffic"
+  var routeExcludeList: [String] = []
+  var mapStyle: String? = nil
+  var mute: Bool = false
+  var vehicleMaxHeight: Double? = nil
+  var vehicleMaxWidth: Double? = nil
+  var customRasterSourceUrl: String? = nil
+  var placeCustomRasterLayerAbove: String? = nil
+  var disableAlternativeRoutes: Bool = false
+  var showsEndOfRouteFeedback: Bool = false
+
+  // ─── Events ─────────────────────────────────────────────────────────────
+  let onRouteProgressChanged = EventDispatcher()
+  let onWaypointArrival = EventDispatcher()
+  let onFinalDestinationArrival = EventDispatcher()
+  let onCancelNavigation = EventDispatcher()
+  let onRouteChanged = EventDispatcher()
+  let onUserOffRoute = EventDispatcher()
+  let onRoutesLoaded = EventDispatcher()
+
+  // ─── Internal ───────────────────────────────────────────────────────────
+  private var navigationViewController: NavigationViewController?
+  private var isNavigationStarted = false
+  private var currentWaypointIndex = 0
+  private var totalWaypoints = 0
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+  }
+
+  func startNavigationIfReady() {
+    guard coordinates.count >= 2, !isNavigationStarted else { return }
+    isNavigationStarted = true
+    setupNavigation()
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    startNavigationIfReady()
+  }
+
+  // ─── Navigation Setup ───────────────────────────────────────────────────
+
+  private func setupNavigation() {
+    // Construire les waypoints
+    var allWaypoints: [Waypoint] = []
+
+    for (index, coord) in coordinates.enumerated() {
+      guard let lat = coord["latitude"], let lng = coord["longitude"] else { continue }
+      let location = CLLocationCoordinate2D(latitude: lat, longitude: lng)
+      let wp = Waypoint(coordinate: location)
+
+      // Marquer les waypoints intermédiaires vs simples pass-through
+      if !waypointIndices.isEmpty {
+        wp.separatesLegs = waypointIndices.contains(index)
+      } else {
+        wp.separatesLegs = true
+      }
+
+      allWaypoints.append(wp)
+    }
+
+    totalWaypoints = allWaypoints.filter { $0.separatesLegs }.count
+
+    // Choisir le profil de routing
+    let profile: ProfileIdentifier
+    switch routeProfile {
+    case "mapbox/driving": profile = .automobile
+    case "mapbox/walking": profile = .walking
+    case "mapbox/cycling": profile = .cycling
+    default: profile = .automobileAvoidingTraffic
+    }
+
+    // Options de route
+    let routeOptions = NavigationRouteOptions(waypoints: allWaypoints, profileIdentifier: profile)
+
+    let resolvedLocale = locale.isEmpty ? Locale.current.identifier : locale
+    routeOptions.locale = Locale(identifier: resolvedLocale)
+    routeOptions.includesSpokenInstructions = true
+    routeOptions.includesVisualInstructions = true
+
+    // Exclusions
+    if !routeExcludeList.isEmpty {
+      routeOptions.roadClassesToAvoid = buildRoadClassesToAvoid(routeExcludeList)
+    }
+
+    // Restrictions de véhicule
+    if let maxH = vehicleMaxHeight {
+      routeOptions.maximumHeight = Measurement(value: maxH, unit: .meters)
+    }
+    if let maxW = vehicleMaxWidth {
+      routeOptions.maximumWidth = Measurement(value: maxW, unit: .meters)
+    }
+
+    if disableAlternativeRoutes {
+      routeOptions.includesAlternativeRoutes = false
+    }
+
+    // Calcul de la route
+    Directions.shared.calculate(routeOptions) { [weak self] (_, result) in
+      guard let self = self else { return }
+      switch result {
+      case .failure(let error):
+        print("[ExpoMapboxNavigation] Erreur calcul route: \(error.localizedDescription)")
+      case .success(let response):
+        guard let routes = response.routes, !routes.isEmpty else { return }
+        self.onRoutesLoaded([:])
+        self.presentNavigationUI(routes: routes, options: routeOptions)
+      }
+    }
+  }
+
+  private func presentNavigationUI(routes: [Route], options: NavigationRouteOptions) {
+    DispatchQueue.main.async { [weak self] in
+      guard let self = self else { return }
+
+      let navigationService = MapboxNavigationService(
+        routes: routes,
+        customRoutingProvider: NavigationSettings.shared.directions,
+        credentials: NavigationSettings.shared.directions.credentials,
+        simulating: .onPoorGPS
+      )
+
+      let navigationOptions = NavigationOptions(navigationService: navigationService)
+      let navVC = NavigationViewController(
+        for: routes,
+        routeIndex: 0,
+        routeOptions: options,
+        navigationOptions: navigationOptions
+      )
+
+      navVC.delegate = self
+      navVC.showsEndOfRouteFeedback = self.showsEndOfRouteFeedback
+      navVC.showsReportFeedback = false
+
+      if self.mute {
+        navVC.navigationService.router.reroutesProactively = false
+      }
+
+      self.navigationViewController = navVC
+
+      guard let parentVC = self.parentViewController else { return }
+      parentVC.addChild(navVC)
+      navVC.view.frame = self.bounds
+      navVC.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+      self.addSubview(navVC.view)
+      navVC.didMove(toParent: parentVC)
+    }
+  }
+
+  private func buildRoadClassesToAvoid(_ list: [String]) -> RoadClasses {
+    var classes = RoadClasses()
+    for item in list {
+      switch item {
+      case "toll": classes.insert(.toll)
+      case "ferry": classes.insert(.ferry)
+      case "motorway": classes.insert(.motorway)
+      default: break
+      }
+    }
+    return classes
+  }
+
+  private var parentViewController: UIViewController? {
+    var responder: UIResponder? = self
+    while let r = responder {
+      if let vc = r as? UIViewController { return vc }
+      responder = r.next
+    }
+    return nil
+  }
+}
+
+// ─── NavigationViewControllerDelegate ───────────────────────────────────────
+
+extension ExpoMapboxNavigationView: NavigationViewControllerDelegate {
+
+  func navigationViewController(
+    _ vc: NavigationViewController,
+    didUpdate progress: RouteProgress,
+    with location: CLLocation,
+    rawLocation: CLLocation
+  ) {
+    onRouteProgressChanged([
+      "distanceRemaining": progress.currentLegProgress.distanceRemaining,
+      "distanceTraveled": progress.distanceTraveled,
+      "durationRemaining": progress.durationRemaining,
+      "fractionTraveled": progress.fractionTraveled
+    ])
+
+    // Détection hors route
+    if progress.currentLegProgress.userHasArrivedAtWaypoint {
+      currentWaypointIndex += 1
+      if currentWaypointIndex < totalWaypoints - 1 {
+        onWaypointArrival([
+          "distanceRemaining": progress.currentLegProgress.distanceRemaining,
+          "distanceTraveled": progress.distanceTraveled,
+          "durationRemaining": progress.durationRemaining,
+          "fractionTraveled": progress.fractionTraveled
+        ])
+      }
+    }
+  }
+
+  func navigationViewControllerDidFinishRouting(_ vc: NavigationViewController) {
+    onFinalDestinationArrival([:])
+  }
+
+  func navigationViewControllerDidDismiss(_ vc: NavigationViewController, byCanceling canceled: Bool) {
+    if canceled {
+      onCancelNavigation([:])
+    }
+  }
+
+  func navigationViewController(_ vc: NavigationViewController, didRerouteAlong route: Route) {
+    onRouteChanged([:])
+  }
+
+  func navigationViewController(_ vc: NavigationViewController, shouldRerouteFrom location: CLLocation) -> Bool {
+    onUserOffRoute([:])
+    return true
+  }
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@jacques_gordon/expo-mapbox-navigation",
+  "version": "1.0.0",
+  "description": "Expo module for Mapbox turn-by-turn navigation — iOS & Android, compatible with Expo SDK 53 Dev Client",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "files": [
+    "build",
+    "ios",
+    "android",
+    "plugin/build",
+    "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"
+  },
+  "keywords": [
+    "expo",
+    "mapbox",
+    "navigation",
+    "turn-by-turn",
+    "react-native",
+    "expo-module",
+    "gps",
+    "waypoints"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jacquesngomeheffa/expo-mapbox-navigation.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jacquesngomeheffa/expo-mapbox-navigation/issues"
+  },
+  "homepage": "https://github.com/jacquesngomeheffa/expo-mapbox-navigation#readme",
+  "peerDependencies": {
+    "expo": ">=53.0.0",
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@expo/config-plugins": "^9.0.0",
+    "@types/react": "^19.2.17",
+    "expo-module-scripts": "^56.0.3",
+    "expo-modules-core": "^2.0.0",
+    "typescript": "^5.3.0"
+  },
+  "expo": {
+    "fyi": "https://expo.fyi/",
+    "config": "./plugin/build/index.js"
+  },
+  "dependencies": {
+    "react": "^19.2.7",
+    "react-native": "^0.86.0"
+  }
+}