feature/travelMode

README.md

@@ -177,6 +177,12 @@ const styles = StyleSheet.create({
 
 - `onArrive`: Function that is called when you arrive at the provided destination.
 
+- `travelMode` ('driving' | 'driving-traffic' | 'walking' | 'cycling'): Specifies the mode of travel to be used for navigation (default is 'driving-traffic'):
+  - 'driving': Standard automobile navigation that does not take live traffic conditions into account.
+  - 'driving-traffic': Automobile navigation that considers current traffic conditions to avoid congestion.
+  - 'walking': Navigation for pedestrians.
+  - 'cycling': Navigation optimized for cyclists.
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

android/src/main/java/com/mapboxnavigation/MapboxNavigationView.kt

@@ -95,6 +95,7 @@ class MapboxNavigationView(private val context: ThemedReactContext): FrameLayout
   private var waypointLegs: List<WaypointLegs> = listOf()
   private var distanceUnit: String = DirectionsCriteria.IMPERIAL
   private var locale = Locale.getDefault()
+  private var travelMode: String = DirectionsCriteria.PROFILE_DRIVING
 
   /**
    * Bindings to the example layout.
@@ -697,6 +698,7 @@ class MapboxNavigationView(private val context: ThemedReactContext): FrameLayout
         .steps(true)
         .voiceInstructions(true)
         .voiceUnits(distanceUnit)
+        .profile(travelMode)
         .build(),
       object : NavigationRouterCallback {
         override fun onCanceled(routeOptions: RouteOptions, @RouterOrigin routerOrigin: String) {
@@ -820,4 +822,14 @@ class MapboxNavigationView(private val context: ThemedReactContext): FrameLayout
   fun setShowCancelButton(show: Boolean) {
     binding.stop.visibility = if (show) View.VISIBLE else View.INVISIBLE
   }
+
+  fun setTravelMode(mode: String) {
+    travelMode = when (mode.lowercase()) {
+        "walking" -> DirectionsCriteria.PROFILE_WALKING
+        "cycling" -> DirectionsCriteria.PROFILE_CYCLING
+        "driving" -> DirectionsCriteria.PROFILE_DRIVING
+        "driving-traffic" -> DirectionsCriteria.PROFILE_DRIVING_TRAFFIC
+        else -> DirectionsCriteria.PROFILE_DRIVING_TRAFFIC
+    }
+  }
 }

android/src/main/java/com/mapboxnavigation/MapboxNavigationViewManager.kt

@@ -109,6 +109,13 @@ class MapboxNavigationViewManager(private var reactContext: ReactApplicationCont
     view?.setMute(value)
   }
 
+  @ReactProp(name = "travelMode")
+  override fun setTravelMode(view: MapboxNavigationView?, value: String?) {
+    if (value != null)  {
+      view?.setTravelMode(value)
+    }
+  }
+
   companion object {
     const val NAME = "MapboxNavigationView"
   }

android/src/oldarch/MapboxNavigationViewManagerSpec.kt

@@ -14,4 +14,5 @@ abstract class MapboxNavigationViewManagerSpec<T : View> : SimpleViewManager<T>(
   abstract fun setLocal(view: T?, language: String?)
   abstract fun setMute(view: T?, value: Boolean)
   abstract fun setShowCancelButton(view: T?, value: Boolean)
+  abstract fun setTravelMode(view: T?, value: String?)
 }

example/src/App.tsx

@@ -31,6 +31,7 @@ export default function App() {
         longitude: 76.695669,
         title: 'Pickup',
       }}
+      travelMode="driving-traffic"
       style={styles.container}
       shouldSimulateRoute={true}
       showCancelButton={true}

ios/MapboxNavigationView.swift

@@ -62,6 +62,7 @@ public class MapboxNavigationView: UIView, NavigationViewControllerDelegate {
     @objc var distanceUnit: NSString = "imperial"
     @objc var language: NSString = "us"
     @objc var destinationTitle: NSString = "Destination"
+    @objc var travelMode: NSString = "driving-traffic"
 
     @objc var onLocationChange: RCTDirectEventBlock?
     @objc var onRouteProgressChange: RCTDirectEventBlock?
@@ -117,7 +118,20 @@ public class MapboxNavigationView: UIView, NavigationViewControllerDelegate {
         let destinationWaypoint = Waypoint(coordinate: CLLocationCoordinate2D(latitude: destination[1] as! CLLocationDegrees, longitude: destination[0] as! CLLocationDegrees), name: destinationTitle as String)
         waypointsArray.append(destinationWaypoint)
 
-        let options = NavigationRouteOptions(waypoints: waypointsArray, profileIdentifier: .automobileAvoidingTraffic)
+        let profile: MBDirectionsProfileIdentifier
+
+        switch travelMode {
+            case "cycling":
+                profile = .cycling
+            case "walking":
+                profile = .walking
+            case "driving-traffic":
+                profile = .automobileAvoidingTraffic
+            default:
+                profile = .automobile
+        }
+
+        let options = NavigationRouteOptions(waypoints: waypointsArray, profileIdentifier: profile)
 
         let locale = self.language.replacingOccurrences(of: "-", with: "_")
         options.locale = Locale(identifier: locale)

ios/MapboxNavigationViewManager.m

@@ -30,5 +30,6 @@ @interface RCT_EXTERN_MODULE(MapboxNavigationViewManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(language, NSString)
 RCT_EXPORT_VIEW_PROPERTY(distanceUnit, NSString)
 RCT_EXPORT_VIEW_PROPERTY(mute, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(travelMode, NSString)
 
 @end

src/MapboxNavigation.tsx

@@ -106,6 +106,7 @@ class MapboxNavigation extends React.Component<
       onRouteProgressChange,
       onCancelNavigation,
       onError,
+      travelMode,
       ...rest
     } = this.props;
 
@@ -126,6 +127,7 @@ class MapboxNavigation extends React.Component<
           onCancelNavigation={(event) =>
             onCancelNavigation?.(event.nativeEvent)
           }
+          travelMode={travelMode}
           {...rest}
         />
       </View>

src/MapboxNavigationViewNativeComponent.ts

@@ -23,6 +23,7 @@ interface NativeProps extends ViewProps {
   shouldSimulateRoute?: boolean;
   showsEndOfRouteFeedback?: boolean;
   hideStatusView?: boolean;
+  travelMode?: string;
 }
 
 export default codegenNativeComponent<NativeProps>(

src/types.ts

@@ -69,6 +69,19 @@ export interface MapboxNavigationProps {
   destination: Coordinate & { title?: string };
   language?: Language;
   distanceUnit?: 'metric' | 'imperial';
+
+  /**
+   * Specifies the mode of travel for navigation.
+   *
+   * - 'driving': Standard driving mode that does not take live traffic conditions into account.
+   * - 'driving-traffic': Driving mode that considers current traffic conditions to avoid congestion.
+   * - 'walking': Navigation for pedestrians.
+   * - 'cycling': Navigation optimized for cyclists.
+   *
+   * @Default "driving-traffic"
+   */
+  travelMode?: 'driving' | 'driving-traffic' | 'walking' | 'cycling';
+
   /**
    * [iOS only]
    * @Default false