[FIX][IOS] MapboxNavigationView: fix waypoints + tabs

README.md

@@ -124,7 +124,7 @@ Add the following to your ios podfile -
 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
-platform :ios, '10.0'
+platform :ios, '12.0'
 install! 'cocoapods', :disable_input_output_paths => true
 
 target 'AwesomeProject' do

android/build.gradle

@@ -23,10 +23,10 @@ def safeExtGet(prop, fallback) {
 
 apply plugin: 'com.android.library'
 apply plugin: 'kotlin-android'
-apply plugin: 'maven'
+apply plugin: 'maven-publish'
 
 buildscript {
-    ext.kotlin_version = '1.5.21'
+    ext.kotlin_version = '1.6.0'
     // The Android Gradle plugin is only required when opening the android folder stand-alone.
     // This avoids unnecessary downloads and potential conflicts when the library is included as a
     // module dependency in an application project.
@@ -52,7 +52,7 @@ buildscript {
 
 apply plugin: 'com.android.library'
 apply plugin: 'kotlin-android'
-apply plugin: 'maven'
+apply plugin: 'maven-publish'
 
 android {
     compileSdkVersion safeExtGet('compileSdkVersion', DEFAULT_COMPILE_SDK_VERSION)
@@ -89,14 +89,27 @@ repositories {
         // Android JSC is installed from npm
         url "$rootDir/../node_modules/jsc-android/dist"
     }
+    maven {
+        url 'https://api.mapbox.com/downloads/v2/releases/maven'
+        authentication {
+            basic(BasicAuthentication)
+        }
+        credentials {
+            username = "rodesc"
+            password = project.hasProperty('MAPBOX_DOWNLOADS_TOKEN') ? project.property('MAPBOX_DOWNLOADS_TOKEN') : System.getenv('MAPBOX_DOWNLOADS_TOKEN')
+            if (password == null || password == "") {
+                throw new GradleException("MAPBOX_DOWNLOADS_TOKEN isn't set. Set it to the project properties or to the enviroment variables.")
+            }
+        }
+    }
     google()
     jcenter()
 }
 
 dependencies {
     //noinspection GradleDynamicVersion
     implementation 'com.facebook.react:react-native:+'  // From node_modules
-    implementation "com.mapbox.navigation:android:2.0.0"
+    implementation "com.mapbox.navigation:android:2.1.1"
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
     implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
     implementation 'androidx.cardview:cardview:1.0.0'
@@ -122,14 +135,16 @@ def configureReactNativePom(def pom) {
         }
     }
 }
-
+configurations {
+      customConfig.extendsFrom implementation
+    }
 afterEvaluate { project ->
     // some Gradle build hooks ref:
     // https://www.oreilly.com/library/view/gradle-beyond-the/9781449373801/ch03.html
     task androidJavadoc(type: Javadoc) {
         source = android.sourceSets.main.java.srcDirs
         classpath += files(android.bootClasspath)
-        classpath += files(project.getConfigurations().getByName('compile').asList())
+        classpath += files(project.getConfigurations().getByName('customConfig').asList())
         include '**/*.java'
     }
 
@@ -158,10 +173,13 @@ afterEvaluate { project ->
 
     task installArchives(type: Upload) {
         configuration = configurations.archives
-        repositories.mavenDeployer {
-            // Deploy to react-native-event-bridge/maven, ready to publish to npm
-            repository url: "file://${projectDir}/../android/maven"
-            configureReactNativePom pom
+        repositories {
+            maven {
+                // Deploy to react-native-event-bridge/maven, ready to publish to npm
+                url = "file://${projectDir}/../android/maven"
+               // repository url: "file://${projectDir}/../android/maven"
+              //  configureReactNativePom pom
+            }
         }
     }
 }

android/src/main/java/com/homee/mapboxnavigation/FreerideNavigationManager.kt

@@ -51,6 +51,7 @@ class FreerideNavigationManager(var mCallerContext: ReactApplicationContext) : S
                 "onCancelNavigation", MapBuilder.of("registrationName", "onCancelNavigation"),
                 "onArrive", MapBuilder.of("registrationName", "onArrive"),
                 "onRouteProgressChange", MapBuilder.of("registrationName", "onRouteProgressChange"),
+                "onSkip", MapBuilder.of("registrationName", "onSkip"),
         )
     }
 

android/src/main/java/com/homee/mapboxnavigation/MapboxNavigationManager.kt

@@ -52,6 +52,7 @@ class MapboxNavigationManager(var mCallerContext: ReactApplicationContext) : Sim
                 "onCancelNavigation", MapBuilder.of("registrationName", "onCancelNavigation"),
                 "onArrive", MapBuilder.of("registrationName", "onArrive"),
                 "onRouteProgressChange", MapBuilder.of("registrationName", "onRouteProgressChange"),
+                 "onSkip", MapBuilder.of("registrationName", "onSkip"),
         )
     }
 

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

@@ -9,6 +9,7 @@ import android.view.LayoutInflater
 import android.view.View
 import android.widget.FrameLayout
 import android.widget.Toast
+import android.graphics.Color
 import androidx.core.content.ContextCompat
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.uimanager.ThemedReactContext
@@ -62,6 +63,7 @@ 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.RouteLineColorResources
 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
@@ -78,6 +80,7 @@ import com.mapbox.navigation.ui.voice.model.SpeechValue
 import com.mapbox.navigation.ui.voice.model.SpeechVolume
 import java.util.Locale
 import com.facebook.react.uimanager.events.RCTEventEmitter
+import com.mapbox.navigation.ui.maps.route.line.model.RouteLineResources
 
 class MapboxNavigationView(private val context: ThemedReactContext, private val accessToken: String?) :
     FrameLayout(context.baseContext) {
@@ -323,6 +326,10 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
         if (style != null) {
             val maneuverArrowResult = routeArrowApi.addUpcomingManeuverArrow(routeProgress)
             routeArrowView.renderManeuverUpdate(style, maneuverArrowResult)
+
+            routeLineApi.updateWithRouteProgress(routeProgress) { result ->
+                 routeLineView.renderRouteLineUpdate(style, result)
+            }
         }
 
         // update top banner with maneuver instructions
@@ -477,7 +484,6 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
         }
 
         mapboxMap = binding.mapView.getMapboxMap()
-
         // initialize the location puck
         binding.mapView.location.apply {
             this.locationPuck = LocationPuck2D(
@@ -585,11 +591,13 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
         // 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)
+
+
+//        val customColorResources = RouteLineColorResources.Builder()
+//            .inActiveRouteLegsColor(Color.parseColor("#55FFCC00"))
+//            .build()
+
+
 
         // initialize maneuver arrow view to draw arrows on the map
         val routeArrowOptions = RouteArrowOptions.Builder(context).build()
@@ -601,6 +609,32 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
             Style.MAPBOX_STREETS
         )
 
+
+        val customColorResources = RouteLineColorResources.Builder()
+            .routeDefaultColor(Color.parseColor("#454B1B"))
+            .inActiveRouteLegsColor(Color.parseColor("#FFCC00"))
+            .build()
+
+
+
+
+
+
+        val routeLineResources = RouteLineResources.Builder()
+            .routeLineColorResources(customColorResources)
+            .build()
+
+        val mapboxRouteLineOptions = MapboxRouteLineOptions.Builder(context)
+            .withRouteLineBelowLayerId("road-label")
+            .withVanishingRouteLineEnabled(true)
+            .styleInactiveRouteLegsIndependently(true)
+            .withRouteLineResources(routeLineResources)
+            .build()
+
+
+        routeLineApi = MapboxRouteLineApi(mapboxRouteLineOptions)
+        routeLineView = MapboxRouteLineView(mapboxRouteLineOptions)
+
         // initialize view 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.
@@ -623,6 +657,16 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
             isVoiceInstructionsMuted = !isVoiceInstructionsMuted
         }
 
+        binding.next.setOnClickListener {
+            val event = Arguments.createMap()
+            event.putString("onSkip", "Navigation Closed")
+            context
+                .getJSModule(RCTEventEmitter::class.java)
+                .receiveEvent(id, "onSkip", event)
+        }
+
+//        binding.next.set
+
         // set initial sounds button state
         binding.soundButton.unmute()
 
@@ -677,7 +721,7 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
             mapboxNavigation.requestRoutes(
                 RouteOptions.builder()
                     .applyDefaultNavigationOptions()
-//                    .applyLanguageAndVoiceUnitOptions(context)
+                    .applyLanguageAndVoiceUnitOptions(context)
                     .coordinatesList(listbhai)
                     .language(this.applanguage)
                     .profile(DirectionsCriteria.PROFILE_DRIVING)
@@ -735,7 +779,7 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
         binding.soundButton.visibility = View.VISIBLE
         binding.routeOverview.visibility = View.INVISIBLE
         binding.tripProgressCard.visibility = View.VISIBLE
-
+        binding.next.visibility = View.VISIBLE
         // move the camera to overview when new route is available
         navigationCamera.requestNavigationCameraToFollowing()
     }
@@ -752,6 +796,7 @@ class MapboxNavigationView(private val context: ThemedReactContext, private val
         binding.maneuverView.visibility = View.INVISIBLE
         binding.routeOverview.visibility = View.INVISIBLE
         binding.tripProgressCard.visibility = View.INVISIBLE
+        binding.next.visibility = View.INVISIBLE
     }
 
     private fun startSimulation(route: DirectionsRoute) {

android/src/main/res/drawable/button_states.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_pressed="false">
+        <shape android:shape="rectangle">
+            <corners android:radius="1000dp" />
+            <solid android:color="#ffff" />
+            <stroke
+                android:width="2dip"
+                android:color="#ffff" />
+            <padding
+                android:bottom="4dp"
+                android:left="4dp"
+                android:right="4dp"
+                android:top="4dp" />
+        </shape>
+    </item>
+    <item android:state_pressed="true">
+        <shape android:shape="rectangle">
+            <corners android:radius="1000dp" />
+            <solid android:color="#ffff" />
+            <stroke
+                android:width="2dip"
+                android:color="#ffff" />
+            <padding
+                android:bottom="4dp"
+                android:left="4dp"
+                android:right="4dp"
+                android:top="4dp" />
+        </shape>
+    </item>
+</selector>

android/src/main/res/layout/freeride_view.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 

android/src/main/res/layout/navigation_view.xml

@@ -61,6 +61,19 @@
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toBottomOf="@id/maneuverView" />
 
+    <Button
+        android:id="@+id/next"
+        android:layout_width="52dp"
+        android:layout_height="52dp"
+        android:text="next"
+        android:background="@drawable/button_states"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/maneuverView"
+        android:visibility="invisible"
+        android:layout_marginTop="75dp"
+        android:layout_marginEnd="16dp"/>
+
+
     <com.mapbox.navigation.ui.maps.camera.view.MapboxRouteOverviewButton
         android:id="@+id/routeOverview"
         android:layout_width="wrap_content"