@jadamsbit/react-native-mapbox-navigation 1.0.18 → 1.0.20

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

@@ -12,12 +12,18 @@ import android.widget.Toast
 import androidx.core.content.ContextCompat
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import com.jadamsbit.mapboxnavigation.databinding.NavigationViewBinding
+import com.mapbox.api.directions.v5.DirectionsCriteria
 import com.mapbox.api.directions.v5.models.DirectionsRoute
 import com.mapbox.api.directions.v5.models.RouteOptions
 import com.mapbox.bindgen.Expected
+import com.mapbox.geojson.Feature
+import com.mapbox.geojson.FeatureCollection
+import com.mapbox.geojson.LineString
 import com.mapbox.geojson.Point
+import com.mapbox.geojson.utils.PolylineUtils
 import com.mapbox.maps.EdgeInsets
-import com.mapbox.maps.MapView
 import com.mapbox.maps.MapboxMap
 import com.mapbox.maps.Style
 import com.mapbox.maps.plugin.LocationPuck2D
@@ -30,9 +36,11 @@ import com.mapbox.navigation.base.options.NavigationOptions
 import com.mapbox.navigation.base.route.RouterCallback
 import com.mapbox.navigation.base.route.RouterFailure
 import com.mapbox.navigation.base.route.RouterOrigin
+import com.mapbox.navigation.base.trip.model.RouteLegProgress
+import com.mapbox.navigation.base.trip.model.RouteProgress
 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.arrival.ArrivalObserver
 import com.mapbox.navigation.core.formatter.MapboxDistanceFormatter
 import com.mapbox.navigation.core.replay.MapboxReplayer
 import com.mapbox.navigation.core.replay.ReplayLocationEngine
@@ -42,14 +50,9 @@ import com.mapbox.navigation.core.trip.session.LocationMatcherResult
 import com.mapbox.navigation.core.trip.session.LocationObserver
 import com.mapbox.navigation.core.trip.session.RouteProgressObserver
 import com.mapbox.navigation.core.trip.session.VoiceInstructionsObserver
-import com.jadamsbit.mapboxnavigation.databinding.NavigationViewBinding
-import com.mapbox.api.directions.v5.DirectionsCriteria
-import com.mapbox.navigation.base.trip.model.RouteLegProgress
-import com.mapbox.navigation.base.trip.model.RouteProgress
-import com.mapbox.navigation.core.arrival.ArrivalObserver
+import com.mapbox.navigation.core.directions.session.RoutesObserver
 import com.mapbox.navigation.ui.base.util.MapboxNavigationConsumer
 import com.mapbox.navigation.ui.maneuver.api.MapboxManeuverApi
-import com.mapbox.navigation.ui.maneuver.view.MapboxManeuverView
 import com.mapbox.navigation.ui.maps.camera.NavigationCamera
 import com.mapbox.navigation.ui.maps.camera.data.MapboxNavigationViewportDataSource
 import com.mapbox.navigation.ui.maps.camera.lifecycle.NavigationBasicGesturesHandler
@@ -59,229 +62,126 @@ import com.mapbox.navigation.ui.maps.location.NavigationLocationProvider
 import com.mapbox.navigation.ui.maps.route.arrow.api.MapboxRouteArrowApi
 import com.mapbox.navigation.ui.maps.route.arrow.api.MapboxRouteArrowView
 import com.mapbox.navigation.ui.maps.route.arrow.model.RouteArrowOptions
-import com.mapbox.navigation.ui.maps.route.line.api.MapboxRouteLineApi
-import com.mapbox.navigation.ui.maps.route.line.api.MapboxRouteLineView
-import com.mapbox.navigation.ui.maps.route.line.model.MapboxRouteLineOptions
-import com.mapbox.navigation.ui.maps.route.line.model.RouteLine
 import com.mapbox.navigation.ui.tripprogress.api.MapboxTripProgressApi
 import com.mapbox.navigation.ui.tripprogress.model.DistanceRemainingFormatter
 import com.mapbox.navigation.ui.tripprogress.model.EstimatedTimeToArrivalFormatter
 import com.mapbox.navigation.ui.tripprogress.model.PercentDistanceTraveledFormatter
 import com.mapbox.navigation.ui.tripprogress.model.TimeRemainingFormatter
 import com.mapbox.navigation.ui.tripprogress.model.TripProgressUpdateFormatter
-import com.mapbox.navigation.ui.tripprogress.view.MapboxTripProgressView
 import com.mapbox.navigation.ui.voice.api.MapboxSpeechApi
 import com.mapbox.navigation.ui.voice.api.MapboxVoiceInstructionsPlayer
 import com.mapbox.navigation.ui.voice.model.SpeechAnnouncement
 import com.mapbox.navigation.ui.voice.model.SpeechError
 import com.mapbox.navigation.ui.voice.model.SpeechValue
 import com.mapbox.navigation.ui.voice.model.SpeechVolume
+import com.mapbox.maps.extension.style.layers.addLayer
+import com.mapbox.maps.extension.style.layers.addLayerBelow
+import com.mapbox.maps.extension.style.layers.generated.lineLayer
+import com.mapbox.maps.extension.style.layers.properties.generated.LineCap
+import com.mapbox.maps.extension.style.layers.properties.generated.LineJoin
+import com.mapbox.maps.extension.style.sources.addSource
+import com.mapbox.maps.extension.style.sources.generated.geoJsonSource
+import com.mapbox.maps.extension.style.sources.getSourceAs
 import java.util.Locale
-import com.facebook.react.uimanager.events.RCTEventEmitter
 
-class MapboxNavigationView(private val context: ThemedReactContext, private val accessToken: String?) :
-    FrameLayout(context.baseContext) {
+class MapboxNavigationView(
+    private val reactContext: ThemedReactContext,
+    private val accessToken: String?
+) : FrameLayout(reactContext.baseContext) {
 
     private companion object {
         private const val BUTTON_ANIMATION_DURATION = 1500L
+
+        // Our stable route line IDs (Maps v10)
+        private const val ROUTE_SOURCE_ID = "jadams_route_source"
+        private const val ROUTE_LAYER_ID = "jadams_route_layer"
     }
 
     private var origin: Point? = null
     private var destination: Point? = null
     private var shouldSimulateRoute = false
     private var showsEndOfRouteFeedback = false
-    /**
-     * Debug tool used to play, pause and seek route progress events that can be used to produce mocked location updates along the route.
-     */
-    private val mapboxReplayer = MapboxReplayer()
 
-    /**
-     * Debug tool that mocks location updates with an input from the [mapboxReplayer].
-     */
+    private val mapboxReplayer = MapboxReplayer()
     private val replayLocationEngine = ReplayLocationEngine(mapboxReplayer)
-
-    /**
-     * Debug observer that makes sure the replayer has always an up-to-date information to generate mock updates.
-     */
     private val replayProgressObserver = ReplayProgressObserver(mapboxReplayer)
 
-    /**
-     * Bindings to the example layout.
-     */
     private var binding: NavigationViewBinding =
-        NavigationViewBinding.inflate(LayoutInflater.from(context), this, true)
+        NavigationViewBinding.inflate(LayoutInflater.from(reactContext), this, true)
 
-    /**
-     * Mapbox Maps entry point obtained from the [MapView].
-     * You need to get a new reference to this object whenever the [MapView] is recreated.
-     */
     private lateinit var mapboxMap: MapboxMap
-
-    /**
-     * Mapbox Navigation entry point. There should only be one instance of this object for the app.
-     * You can use [MapboxNavigationProvider] to help create and obtain that instance.
-     */
     private lateinit var mapboxNavigation: MapboxNavigation
-
-    /**
-     * Used to execute camera transitions based on the data generated by the [viewportDataSource].
-     * This includes transitions from route overview to route following and continuously updating the camera as the location changes.
-     */
     private lateinit var navigationCamera: NavigationCamera
-
-    /**
-     * Produces the camera frames based on the location and routing data for the [navigationCamera] to execute.
-     */
     private lateinit var viewportDataSource: MapboxNavigationViewportDataSource
 
-    /*
-     * Below are generated camera padding values to ensure that the route fits well on screen while
-     * other elements are overlaid on top of the map (including instruction view, buttons, etc.)
-     */
+    private lateinit var maneuverApi: MapboxManeuverApi
+    private lateinit var tripProgressApi: MapboxTripProgressApi
+
+    // We KEEP arrows (they are not your crash)
+    private val routeArrowApi: MapboxRouteArrowApi = MapboxRouteArrowApi()
+    private lateinit var routeArrowView: MapboxRouteArrowView
+
+    private lateinit var speechApi: MapboxSpeechApi
+    private lateinit var voiceInstructionsPlayer: MapboxVoiceInstructionsPlayer
+
+    private val navigationLocationProvider = NavigationLocationProvider()
+
+    // style state (we wait for style load before drawing route line)
+    private var styleReady = false
+    private var pendingRoute: DirectionsRoute? = null
+
+    // prevent double requesting routes
+    private var routeRequestInFlight = false
+
     private val pixelDensity = Resources.getSystem().displayMetrics.density
     private val overviewPadding: EdgeInsets by lazy {
-        EdgeInsets(
-            140.0 * pixelDensity,
-            40.0 * pixelDensity,
-            120.0 * pixelDensity,
-            40.0 * pixelDensity
-        )
+        EdgeInsets(140.0 * pixelDensity, 40.0 * pixelDensity, 120.0 * pixelDensity, 40.0 * pixelDensity)
     }
     private val landscapeOverviewPadding: EdgeInsets by lazy {
-        EdgeInsets(
-            30.0 * pixelDensity,
-            380.0 * pixelDensity,
-            110.0 * pixelDensity,
-            20.0 * pixelDensity
-        )
+        EdgeInsets(30.0 * pixelDensity, 380.0 * pixelDensity, 110.0 * pixelDensity, 20.0 * pixelDensity)
     }
     private val followingPadding: EdgeInsets by lazy {
-        EdgeInsets(
-            180.0 * pixelDensity,
-            40.0 * pixelDensity,
-            150.0 * pixelDensity,
-            40.0 * pixelDensity
-        )
+        EdgeInsets(180.0 * pixelDensity, 40.0 * pixelDensity, 150.0 * pixelDensity, 40.0 * pixelDensity)
     }
     private val landscapeFollowingPadding: EdgeInsets by lazy {
-        EdgeInsets(
-            30.0 * pixelDensity,
-            380.0 * pixelDensity,
-            110.0 * pixelDensity,
-            40.0 * pixelDensity
-        )
+        EdgeInsets(30.0 * pixelDensity, 380.0 * pixelDensity, 110.0 * pixelDensity, 40.0 * pixelDensity)
     }
 
-    /**
-     * Generates updates for the [MapboxManeuverView] to display the upcoming maneuver instructions
-     * and remaining distance to the maneuver point.
-     */
-    private lateinit var maneuverApi: MapboxManeuverApi
-
-    /**
-     * Generates updates for the [MapboxTripProgressView] that include remaining time and distance to the destination.
-     */
-    private lateinit var tripProgressApi: MapboxTripProgressApi
-
-    /**
-     * Generates updates for the [routeLineView] with the geometries and properties of the routes that should be drawn on the map.
-     */
-    private lateinit var routeLineApi: MapboxRouteLineApi
-
-    /**
-     * Draws route lines on the map based on the data from the [routeLineApi]
-     */
-    private lateinit var routeLineView: MapboxRouteLineView
-
-    /**
-     * Generates updates for the [routeArrowView] with the geometries and properties of maneuver arrows that should be drawn on the map.
-     */
-    private val routeArrowApi: MapboxRouteArrowApi = MapboxRouteArrowApi()
-
-    /**
-     * Draws maneuver arrows on the map based on the data [routeArrowApi].
-     */
-    private lateinit var routeArrowView: MapboxRouteArrowView
-
-    /**
-     * Stores and updates the state of whether the voice instructions should be played as they come or muted.
-     */
     private var isVoiceInstructionsMuted = false
         set(value) {
             field = value
-            if (value) {
-                binding.soundButton.muteAndExtend(BUTTON_ANIMATION_DURATION)
-                voiceInstructionsPlayer.volume(SpeechVolume(0f))
-            } else {
-                binding.soundButton.unmuteAndExtend(BUTTON_ANIMATION_DURATION)
-                voiceInstructionsPlayer.volume(SpeechVolume(1f))
+            if (::voiceInstructionsPlayer.isInitialized) {
+                if (value) {
+                    binding.soundButton.muteAndExtend(BUTTON_ANIMATION_DURATION)
+                    voiceInstructionsPlayer.volume(SpeechVolume(0f))
+                } else {
+                    binding.soundButton.unmuteAndExtend(BUTTON_ANIMATION_DURATION)
+                    voiceInstructionsPlayer.volume(SpeechVolume(1f))
+                }
             }
         }
 
-    /**
-     * Extracts message that should be communicated to the driver about the upcoming maneuver.
-     * When possible, downloads a synthesized audio file that can be played back to the driver.
-     */
-    private lateinit var speechApi: MapboxSpeechApi
-
-    /**
-     * Plays the synthesized audio files with upcoming maneuver instructions
-     * or uses an on-device Text-To-Speech engine to communicate the message to the driver.
-     */
-    private lateinit var voiceInstructionsPlayer: MapboxVoiceInstructionsPlayer
-
-    /**
-     * Observes when a new voice instruction should be played.
-     */
     private val voiceInstructionsObserver = VoiceInstructionsObserver { voiceInstructions ->
         speechApi.generate(voiceInstructions, speechCallback)
     }
 
-    /**
-     * Based on whether the synthesized audio file is available, the callback plays the file
-     * or uses the fall back which is played back using the on-device Text-To-Speech engine.
-     */
     private val speechCallback =
         MapboxNavigationConsumer<Expected<SpeechError, SpeechValue>> { expected ->
             expected.fold(
                 { error ->
-                    // play the instruction via fallback text-to-speech engine
-                    voiceInstructionsPlayer.play(
-                        error.fallback,
-                        voiceInstructionsPlayerCallback
-                    )
+                    voiceInstructionsPlayer.play(error.fallback, voiceInstructionsPlayerCallback)
                 },
                 { value ->
-                    // play the sound file from the external generator
-                    voiceInstructionsPlayer.play(
-                        value.announcement,
-                        voiceInstructionsPlayerCallback
-                    )
+                    voiceInstructionsPlayer.play(value.announcement, voiceInstructionsPlayerCallback)
                 }
             )
         }
 
-    /**
-     * When a synthesized audio file was downloaded, this callback cleans up the disk after it was played.
-     */
     private val voiceInstructionsPlayerCallback =
         MapboxNavigationConsumer<SpeechAnnouncement> { value ->
-            // remove already consumed file to free-up space
             speechApi.clean(value)
         }
 
-    /**
-     * [NavigationLocationProvider] is a utility class that helps to provide location updates generated by the Navigation SDK
-     * to the Maps SDK in order to update the user location indicator on the map.
-     */
-    private val navigationLocationProvider = NavigationLocationProvider()
-
-    /**
-     * Gets notified with location updates.
-     *
-     * Exposes raw updates coming directly from the location services
-     * and the updates enhanced by the Navigation SDK (cleaned up and matched to the road).
-     */
     private val locationObserver = object : LocationObserver {
         override fun onNewRawLocation(rawLocation: Location) {
             // not handled
@@ -289,49 +189,40 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
 
         override fun onNewLocationMatcherResult(locationMatcherResult: LocationMatcherResult) {
             val enhancedLocation = locationMatcherResult.enhancedLocation
-            // update location puck's position on the map
+
             navigationLocationProvider.changePosition(
                 location = enhancedLocation,
                 keyPoints = locationMatcherResult.keyPoints,
             )
 
-            // update camera position to account for new location
             viewportDataSource.onLocationChanged(enhancedLocation)
             viewportDataSource.evaluate()
 
-            val event = Arguments.createMap()
-            event.putDouble("longitude", enhancedLocation.longitude)
-            event.putDouble("latitude", enhancedLocation.latitude)
-            context
+            val event = Arguments.createMap().apply {
+                putDouble("longitude", enhancedLocation.longitude)
+                putDouble("latitude", enhancedLocation.latitude)
+            }
+
+            reactContext
                 .getJSModule(RCTEventEmitter::class.java)
                 .receiveEvent(id, "onLocationChange", event)
         }
     }
 
-    /**
-     * Gets notified with progress along the currently active route.
-     */
     private val routeProgressObserver = RouteProgressObserver { routeProgress ->
-        // update the camera position to account for the progressed fragment of the route
         viewportDataSource.onRouteProgressChanged(routeProgress)
         viewportDataSource.evaluate()
 
-        // draw the upcoming maneuver arrow on the map
-        val style = mapboxMap.getStyle()
-        if (style != null) {
+        // arrow rendering is OK
+        mapboxMap.getStyle()?.let { style ->
             val maneuverArrowResult = routeArrowApi.addUpcomingManeuverArrow(routeProgress)
             routeArrowView.renderManeuverUpdate(style, maneuverArrowResult)
         }
 
-        // update top banner with maneuver instructions
         val maneuvers = maneuverApi.getManeuvers(routeProgress)
         maneuvers.fold(
             { error ->
-                Toast.makeText(
-                    context,
-                    error.errorMessage,
-                    Toast.LENGTH_SHORT
-                ).show()
+                Toast.makeText(reactContext, error.errorMessage, Toast.LENGTH_SHORT).show()
             },
             {
                 binding.maneuverView.visibility = View.VISIBLE
@@ -343,84 +234,59 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
             }
         )
 
-        // update bottom trip progress summary
-        binding.tripProgressView.render(
-            tripProgressApi.getTripProgress(routeProgress)
-        )
+        binding.tripProgressView.render(tripProgressApi.getTripProgress(routeProgress))
 
-        val event = Arguments.createMap()
-        event.putDouble("distanceTraveled", routeProgress.distanceTraveled.toDouble())
-        event.putDouble("durationRemaining", routeProgress.durationRemaining.toDouble())
-        event.putDouble("fractionTraveled", routeProgress.fractionTraveled.toDouble())
-        event.putDouble("distanceRemaining", routeProgress.distanceRemaining.toDouble())
-        context
+        val event = Arguments.createMap().apply {
+            putDouble("distanceTraveled", routeProgress.distanceTraveled.toDouble())
+            putDouble("durationRemaining", routeProgress.durationRemaining.toDouble())
+            putDouble("fractionTraveled", routeProgress.fractionTraveled.toDouble())
+            putDouble("distanceRemaining", routeProgress.distanceRemaining.toDouble())
+        }
+
+        reactContext
             .getJSModule(RCTEventEmitter::class.java)
             .receiveEvent(id, "onRouteProgressChange", event)
     }
 
-    /**
-     * Gets notified whenever the tracked routes change.
-     *
-     * A change can mean:
-     * - routes get changed with [MapboxNavigation.setRoutes]
-     * - routes annotations get refreshed (for example, congestion annotation that indicate the live traffic along the route)
-     * - driver got off route and a reroute was executed
-     */
+    // ✅ routes observer now draws route via GeoJson + LineLayer (no RouteLineView => no native crash)
     private val routesObserver = RoutesObserver { routeUpdateResult ->
-        if (routeUpdateResult.routes.isNotEmpty()) {
-            // generate route geometries asynchronously and render them
-            val routeLines = routeUpdateResult.routes.map { RouteLine(it, null) }
-
-            routeLineApi.setRoutes(
-                routeLines
-            ) { value ->
-                mapboxMap.getStyle()?.apply {
-                    routeLineView.renderRouteDrawData(this, value)
-                }
-            }
+        if (!isAttachedToWindow) return@RoutesObserver
+
+        val primary = routeUpdateResult.routes.firstOrNull()
 
-            // update the camera position to account for the new route
-            viewportDataSource.onRouteChanged(routeUpdateResult.routes.first())
+        // camera updates
+        if (primary != null) {
+            viewportDataSource.onRouteChanged(primary)
             viewportDataSource.evaluate()
         } else {
-            // remove the route line and route arrow from the map
-            val style = mapboxMap.getStyle()
-            if (style != null) {
-                routeLineApi.clearRouteLine { value ->
-                    routeLineView.renderClearRouteLineValue(
-                        style,
-                        value
-                    )
-                }
-                routeArrowView.render(style, routeArrowApi.clearArrows())
-            }
-
-            // remove the route reference from camera position evaluations
             viewportDataSource.clearRouteData()
             viewportDataSource.evaluate()
         }
-    }
 
-    private val arrivalObserver = object : ArrivalObserver {
-
-        override fun onWaypointArrival(routeProgress: RouteProgress) {
-            // do something when the user arrives at a waypoint
+        // draw the route line safely
+        binding.mapView.post {
+            if (!isAttachedToWindow) return@post
+            val style = mapboxMap.getStyle()
+            if (style == null || !styleReady) {
+                pendingRoute = primary
+                return@post
+            }
+            renderRouteLine(style, primary)
         }
+    }
 
-        override fun onNextRouteLegStart(routeLegProgress: RouteLegProgress) {
-            // do something when the user starts a new leg
-        }
+    private val arrivalObserver = object : ArrivalObserver {
+        override fun onWaypointArrival(routeProgress: RouteProgress) {}
+        override fun onNextRouteLegStart(routeLegProgress: RouteLegProgress) {}
 
         override fun onFinalDestinationArrival(routeProgress: RouteProgress) {
-            val event = Arguments.createMap()
-            event.putString("onArrive", "")
-            context
+            val event = Arguments.createMap().apply { putString("message", "Arrived") }
+            reactContext
                 .getJSModule(RCTEventEmitter::class.java)
-                .receiveEvent(id, "onRouteProgressChange", event)
+                .receiveEvent(id, "onArrive", event) // ✅ correct event name
         }
     }
 
-
     override fun onAttachedToWindow() {
         super.onAttachedToWindow()
         onCreate()
@@ -432,20 +298,79 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
     }
 
     private val measureAndLayout = Runnable {
-        measure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
-            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY))
+        measure(
+            MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+        )
         layout(left, top, right, bottom)
     }
 
+    private fun sendErrorToReact(error: String?) {
+        val event = Arguments.createMap().apply { putString("error", error) }
+        reactContext
+            .getJSModule(RCTEventEmitter::class.java)
+            .receiveEvent(id, "onError", event)
+    }
+
+    private fun ensureStyleHasRouteLine(style: Style) {
+        if (!style.styleSourceExists(ROUTE_SOURCE_ID)) {
+            style.addSource(
+                geoJsonSource(ROUTE_SOURCE_ID) {
+                    featureCollection(FeatureCollection.fromFeatures(emptyArray()))
+                }
+            )
+        }
+
+        if (!style.styleLayerExists(ROUTE_LAYER_ID)) {
+            val routeLayer = lineLayer(ROUTE_LAYER_ID, ROUTE_SOURCE_ID) {
+                lineJoin(LineJoin.ROUND)
+                lineCap(LineCap.ROUND)
+                lineWidth(12.0)
+                lineColor("#1E88E5")
+            }
+
+            // Find first location layer
+            val locationLayerId = style.styleLayers
+                .firstOrNull { it.id.contains("mapbox-location") }
+                ?.id
+
+            if (locationLayerId != null) {
+                style.addLayerBelow(routeLayer, locationLayerId)
+            } else {
+                // fallback
+                style.addLayer(routeLayer)
+            }
+        }
+    }
+
+    private fun renderRouteLine(style: Style, route: DirectionsRoute?) {
+        // clear
+        if (route?.geometry().isNullOrEmpty()) {
+            val src = style.getSourceAs<com.mapbox.maps.extension.style.sources.generated.GeoJsonSource>(ROUTE_SOURCE_ID)
+            src?.featureCollection(FeatureCollection.fromFeatures(emptyArray()))
+            return
+        }
+
+        val points = PolylineUtils.decode(route!!.geometry()!!, 6) // polyline6
+        val lineString = LineString.fromLngLats(points)
+        val feature = Feature.fromGeometry(lineString)
+        val fc = FeatureCollection.fromFeature(feature)
+
+        val src = style.getSourceAs<com.mapbox.maps.extension.style.sources.generated.GeoJsonSource>(ROUTE_SOURCE_ID)
+        src?.featureCollection(fc)
+    }
+
     private fun setCameraPositionToOrigin() {
-        val startingLocation = Location(LocationManager.GPS_PROVIDER)
-        startingLocation.latitude = origin!!.latitude()
-        startingLocation.longitude = origin!!.longitude()
+        val o = origin ?: return
+        val startingLocation = Location(LocationManager.GPS_PROVIDER).apply {
+            latitude = o.latitude()
+            longitude = o.longitude()
+        }
         viewportDataSource.onLocationChanged(startingLocation)
 
         navigationCamera.requestNavigationCameraToFollowing(
             stateTransitionOptions = NavigationCameraTransitionOptions.Builder()
-                .maxDuration(0) // instant transition
+                .maxDuration(0)
                 .build()
         )
     }
@@ -456,7 +381,6 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
             sendErrorToReact("Mapbox access token is not set")
             return
         }
-
         if (origin == null || destination == null) {
             sendErrorToReact("origin and destination are required")
             return
@@ -464,53 +388,46 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
 
         mapboxMap = binding.mapView.getMapboxMap()
 
-        // initialize the location puck
+        // location puck
         binding.mapView.location.apply {
             this.locationPuck = LocationPuck2D(
                 bearingImage = ContextCompat.getDrawable(
-                    context,
+                    reactContext,
                     com.mapbox.navigation.ui.maps.R.drawable.mapbox_navigation_puck_icon
-
                 )
             )
             setLocationProvider(navigationLocationProvider)
             enabled = true
         }
 
-        // initialize Mapbox Navigation
+        // Mapbox Navigation
         mapboxNavigation = if (MapboxNavigationProvider.isCreated()) {
             MapboxNavigationProvider.retrieve()
         } else if (shouldSimulateRoute) {
             MapboxNavigationProvider.create(
-                NavigationOptions.Builder(context)
+                NavigationOptions.Builder(reactContext)
                     .accessToken(accessToken)
                     .locationEngine(replayLocationEngine)
                     .build()
             )
         } else {
             MapboxNavigationProvider.create(
-                NavigationOptions.Builder(context)
+                NavigationOptions.Builder(reactContext)
                     .accessToken(accessToken)
                     .build()
             )
         }
 
-        // initialize Navigation Camera
+        // camera setup
         viewportDataSource = MapboxNavigationViewportDataSource(mapboxMap)
+        navigationCamera = NavigationCamera(mapboxMap, binding.mapView.camera, viewportDataSource)
 
-        navigationCamera = NavigationCamera(
-            mapboxMap,
-            binding.mapView.camera,
-            viewportDataSource
-        )
-        // set the animations lifecycle listener to ensure the NavigationCamera stops
-        // automatically following the user location when the map is interacted with
         binding.mapView.camera.addCameraAnimationsLifecycleListener(
             NavigationBasicGesturesHandler(navigationCamera)
         )
-        navigationCamera.registerNavigationCameraStateChangeObserver { navigationCameraState ->
-            // shows/hide the recenter button depending on the camera state
-            when (navigationCameraState) {
+
+        navigationCamera.registerNavigationCameraStateChangeObserver { state ->
+            when (state) {
                 NavigationCameraState.TRANSITION_TO_FOLLOWING,
                 NavigationCameraState.FOLLOWING -> binding.recenter.visibility = View.INVISIBLE
                 NavigationCameraState.TRANSITION_TO_OVERVIEW,
@@ -518,109 +435,76 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
                 NavigationCameraState.IDLE -> binding.recenter.visibility = View.VISIBLE
             }
         }
-        // set the padding values depending on screen orientation and visible view layout
-        if (this.resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
+
+        if (resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
             viewportDataSource.overviewPadding = landscapeOverviewPadding
-        } else {
-            viewportDataSource.overviewPadding = overviewPadding
-        }
-        if (this.resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
             viewportDataSource.followingPadding = landscapeFollowingPadding
         } else {
+            viewportDataSource.overviewPadding = overviewPadding
             viewportDataSource.followingPadding = followingPadding
         }
 
-        // make sure to use the same DistanceFormatterOptions across different features
         val distanceFormatterOptions = mapboxNavigation.navigationOptions.distanceFormatterOptions
 
-        // initialize maneuver api that feeds the data to the top banner maneuver view
-        maneuverApi = MapboxManeuverApi(
-            MapboxDistanceFormatter(distanceFormatterOptions)
-        )
-
-        // initialize bottom progress view
+        maneuverApi = MapboxManeuverApi(MapboxDistanceFormatter(distanceFormatterOptions))
         tripProgressApi = MapboxTripProgressApi(
-            TripProgressUpdateFormatter.Builder(context)
-                .distanceRemainingFormatter(
-                    DistanceRemainingFormatter(distanceFormatterOptions)
-                )
-                .timeRemainingFormatter(
-                    TimeRemainingFormatter(context)
-                )
-                .percentRouteTraveledFormatter(
-                    PercentDistanceTraveledFormatter()
-                )
+            TripProgressUpdateFormatter.Builder(reactContext)
+                .distanceRemainingFormatter(DistanceRemainingFormatter(distanceFormatterOptions))
+                .timeRemainingFormatter(TimeRemainingFormatter(reactContext))
+                .percentRouteTraveledFormatter(PercentDistanceTraveledFormatter())
                 .estimatedTimeToArrivalFormatter(
-                    EstimatedTimeToArrivalFormatter(context, TimeFormat.NONE_SPECIFIED)
+                    EstimatedTimeToArrivalFormatter(reactContext, TimeFormat.NONE_SPECIFIED)
                 )
                 .build()
         )
 
-        // initialize voice instructions api and the voice instruction player
-        speechApi = MapboxSpeechApi(
-            context,
-            accessToken,
-            Locale.US.language
-        )
-        voiceInstructionsPlayer = MapboxVoiceInstructionsPlayer(
-            context,
-            accessToken,
-            Locale.US.language
-        )
+        speechApi = MapboxSpeechApi(reactContext, accessToken, Locale.US.language)
+        voiceInstructionsPlayer = MapboxVoiceInstructionsPlayer(reactContext, accessToken, Locale.US.language)
 
-        // initialize route line, the withRouteLineBelowLayerId is specified to place
-        // the route line below road labels layer on the map
-        // the value of this option will depend on the style that you are using
-        // and under which layer the route line should be placed on the map layers stack
-        val mapboxRouteLineOptions = MapboxRouteLineOptions.Builder(context)
-            .withRouteLineBelowLayerId("road-label")
-            .build()
-        routeLineApi = MapboxRouteLineApi(mapboxRouteLineOptions)
-        routeLineView = MapboxRouteLineView(mapboxRouteLineOptions)
-
-        // initialize maneuver arrow view to draw arrows on the map
-        val routeArrowOptions = RouteArrowOptions.Builder(context).build()
+        val routeArrowOptions = RouteArrowOptions.Builder(reactContext).build()
         routeArrowView = MapboxRouteArrowView(routeArrowOptions)
 
+        // load style and install our stable route line layer
+        styleReady = false
+        mapboxMap.loadStyleUri(Style.MAPBOX_STREETS) { style ->
+            styleReady = true
+            ensureStyleHasRouteLine(style)
+            pendingRoute?.let {
+                renderRouteLine(style, it)
+                pendingRoute = null
+            }
+        }
+
         setCameraPositionToOrigin()
-        // load map style
-        mapboxMap.loadStyleUri(
-            Style.MAPBOX_STREETS
-        )
 
-        // initialize view interactions
+        // UI interactions
         binding.stop.setOnClickListener {
-//            clearRouteAndStopNavigation() // TODO: figure out how we want to address this since a user cannot reinitialize a route once it is canceled.
-            val event = Arguments.createMap()
-            event.putString("onCancelNavigation", "Navigation Closed")
-            context
-                .getJSModule(RCTEventEmitter::class.java)
-                .receiveEvent(id, "onCancelNavigation", event)
+            val event = Arguments.createMap().apply { putString("onCancelNavigation", "Navigation Closed") }
+            reactContext.getJSModule(RCTEventEmitter::class.java).receiveEvent(id, "onCancelNavigation", event)
         }
+
         binding.recenter.setOnClickListener {
             navigationCamera.requestNavigationCameraToFollowing()
             binding.routeOverview.showTextAndExtend(BUTTON_ANIMATION_DURATION)
         }
+
         binding.routeOverview.setOnClickListener {
             navigationCamera.requestNavigationCameraToOverview()
             binding.recenter.showTextAndExtend(BUTTON_ANIMATION_DURATION)
         }
+
         binding.soundButton.setOnClickListener {
-            // mute/unmute voice instructions
             isVoiceInstructionsMuted = !isVoiceInstructionsMuted
         }
 
-        // set initial sounds button state
         binding.soundButton.unmute()
 
-        // start the trip session to being receiving location updates in free drive
-        // and later when a route is set also receiving route progress updates
+        // start trip session + route
         mapboxNavigation.startTripSession()
         startRoute()
     }
 
     private fun startRoute() {
-        // register event listeners
         mapboxNavigation.registerRoutesObserver(routesObserver)
         mapboxNavigation.registerArrivalObserver(arrivalObserver)
         mapboxNavigation.registerRouteProgressObserver(routeProgressObserver)
@@ -628,109 +512,62 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
         mapboxNavigation.registerVoiceInstructionsObserver(voiceInstructionsObserver)
         mapboxNavigation.registerRouteProgressObserver(replayProgressObserver)
 
-        this.origin?.let { this.destination?.let { it1 -> this.findRoute(it, it1) } }
-    }
-
-    override fun onDetachedFromWindow() {
-        super.onDetachedFromWindow()
-        mapboxNavigation.unregisterRoutesObserver(routesObserver)
-        mapboxNavigation.unregisterRouteProgressObserver(routeProgressObserver)
-        mapboxNavigation.unregisterLocationObserver(locationObserver)
-        mapboxNavigation.unregisterVoiceInstructionsObserver(voiceInstructionsObserver)
-        mapboxNavigation.unregisterRouteProgressObserver(replayProgressObserver)
-    }
-
-    private fun onDestroy() {
-        MapboxNavigationProvider.destroy()
-        mapboxReplayer.finish()
-        maneuverApi.cancel()
-        routeLineApi.cancel()
-        routeLineView.cancel()
-        speechApi.cancel()
-        voiceInstructionsPlayer.shutdown()
+        val o = origin
+        val d = destination
+        if (o != null && d != null) {
+            findRouteOnce(o, d)
+        }
     }
 
-    private fun findRoute(origin: Point, destination: Point) {
-        try {
-            mapboxNavigation.requestRoutes(
-                RouteOptions.builder()
-                    .applyDefaultNavigationOptions()
-                    .applyLanguageAndVoiceUnitOptions(context)
-                    .coordinatesList(listOf(origin, destination))
-                    .profile(DirectionsCriteria.PROFILE_DRIVING)
-                    .steps(true)
-                    .build(),
-                object : RouterCallback {
-                    override fun onRoutesReady(
-                        routes: List<DirectionsRoute>,
-                        routerOrigin: RouterOrigin
-                    ) {
-                        setRouteAndStartNavigation(routes)
-                    }
-
-                    override fun onFailure(
-                        reasons: List<RouterFailure>,
-                        routeOptions: RouteOptions
-                    ) {
-                        sendErrorToReact("Error finding route $reasons")
-                    }
-
-                    override fun onCanceled(routeOptions: RouteOptions, routerOrigin: RouterOrigin) {
-                        // no impl
-                    }
+    private fun findRouteOnce(o: Point, d: Point) {
+        if (routeRequestInFlight) return
+        routeRequestInFlight = true
+
+        mapboxNavigation.requestRoutes(
+            RouteOptions.builder()
+                .applyDefaultNavigationOptions()
+                .applyLanguageAndVoiceUnitOptions(reactContext)
+                .coordinatesList(listOf(o, d))
+                .profile(DirectionsCriteria.PROFILE_DRIVING)
+                .steps(true)
+                .build(),
+            object : RouterCallback {
+                override fun onRoutesReady(routes: List<DirectionsRoute>, routerOrigin: RouterOrigin) {
+                    routeRequestInFlight = false
+                    setRouteAndStartNavigation(routes)
                 }
-            )
-        } catch (ex: Exception) {
-            sendErrorToReact(ex.toString())
-        }
 
-    }
+                override fun onFailure(reasons: List<RouterFailure>, routeOptions: RouteOptions) {
+                    routeRequestInFlight = false
+                    sendErrorToReact("Error finding route $reasons")
+                }
 
-    private fun sendErrorToReact(error: String?) {
-        val event = Arguments.createMap()
-        event.putString("error", error)
-        context
-            .getJSModule(RCTEventEmitter::class.java)
-            .receiveEvent(id, "onError", event)
+                override fun onCanceled(routeOptions: RouteOptions, routerOrigin: RouterOrigin) {
+                    routeRequestInFlight = false
+                }
+            }
+        )
     }
 
     private fun setRouteAndStartNavigation(routes: List<DirectionsRoute>) {
         if (routes.isEmpty()) {
             sendErrorToReact("No route found")
-            return;
+            return
         }
-        // set routes, where the first route in the list is the primary route that
-        // will be used for active guidance
+
         mapboxNavigation.setRoutes(routes)
 
-        // start location simulation along the primary route
         if (shouldSimulateRoute) {
             startSimulation(routes.first())
         }
 
-        // show UI elements
         binding.soundButton.visibility = View.VISIBLE
         binding.routeOverview.visibility = View.VISIBLE
         binding.tripProgressCard.visibility = View.VISIBLE
 
-        // move the camera to overview when new route is available
         navigationCamera.requestNavigationCameraToFollowing()
     }
 
-    private fun clearRouteAndStopNavigation() {
-        // clear
-        mapboxNavigation.setRoutes(listOf())
-
-        // stop simulation
-        mapboxReplayer.stop()
-
-        // hide UI elements
-        binding.soundButton.visibility = View.INVISIBLE
-        binding.maneuverView.visibility = View.INVISIBLE
-        binding.routeOverview.visibility = View.INVISIBLE
-        binding.tripProgressCard.visibility = View.INVISIBLE
-    }
-
     private fun startSimulation(route: DirectionsRoute) {
         mapboxReplayer.run {
             stop()
@@ -742,8 +579,33 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
         }
     }
 
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        try {
+            mapboxNavigation.unregisterRoutesObserver(routesObserver)
+            mapboxNavigation.unregisterArrivalObserver(arrivalObserver)
+            mapboxNavigation.unregisterRouteProgressObserver(routeProgressObserver)
+            mapboxNavigation.unregisterLocationObserver(locationObserver)
+            mapboxNavigation.unregisterVoiceInstructionsObserver(voiceInstructionsObserver)
+            mapboxNavigation.unregisterRouteProgressObserver(replayProgressObserver)
+        } catch (_: Throwable) {
+            // ignore
+        }
+    }
+
+    private fun onDestroy() {
+        try {
+            MapboxNavigationProvider.destroy()
+        } catch (_: Throwable) {}
+
+        try { mapboxReplayer.finish() } catch (_: Throwable) {}
+        try { maneuverApi.cancel() } catch (_: Throwable) {}
+        try { speechApi.cancel() } catch (_: Throwable) {}
+        try { voiceInstructionsPlayer.shutdown() } catch (_: Throwable) {}
+    }
+
     fun onDropViewInstance() {
-        this.onDestroy()
+        onDestroy()
     }
 
     fun setOrigin(origin: Point?) {
@@ -765,4 +627,4 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
     fun setMute(mute: Boolean) {
         this.isVoiceInstructionsMuted = mute
     }
-}
+}