Arrived banner still showing with showsEndOfRouteFeedback={false}

[zoolle]

I would like to know how can we remove the arrived banner showing the rating and comment? We are using a custom modal for that and our flow is something like start the journey from current location to pickup point then from pickup point to destination. When I arrive to pickup point we don't want to show the banner with rating and comments. Also the End Navigation have no callback and we cannot hide that. Another thing is that if we change the destination point coordinates it will not update it on navigator only if we relaunch the navigator.

[rossmartin]

There is a showsEndOfRouteFeedback as of the latest version (1.0.4)

Have you implemented onCancelNavigation ?

I recommend that you "replace" the screen you are on or replace the instance of the <MapboxNavigation /> component. That will allow you to do what you want.

[rossmartin]

Just a heads up but I released 1.0.5. I recommend updating to this. Be sure to add the pre_install and post_install hook call to your podfile as documented in the readme for the ios instructions.

[zoolle]

So I've updated to 1.0.5 and added the pre_install and post_install now my Pod file looks like this

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
require_relative '../node_modules/react-native-unimodules/cocoapods.rb'

platform :ios, '10.0'
install! 'cocoapods', :disable_input_output_paths => true
project 'Driver.xcodeproj' #added this line
target 'Driver' do
  use_unimodules!
  config = use_native_modules!

  rn_maps_path = '../node_modules/react-native-maps'

  use_react_native!(:path => config["reactNativePath"])

  # React Native Maps dependencies
  # react-native-maps dependencies
  pod 'react-native-maps', path: rn_maps_path
  pod 'react-native-google-maps', path: rn_maps_path  # Uncomment this line if you want to support GoogleMaps on iOS
  pod 'GoogleMaps'  # Uncomment this line if you want to support GoogleMaps on iOS
  pod 'Google-Maps-iOS-Utils' # Uncomment this line if you want to support GoogleMaps on iOS

  pre_install do |installer|
    $RNMBNAV.pre_install(installer)
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  # use_flipper!({ 'Flipper' => '0.74.0' })
  post_install do |installer|
    # flipper_post_install(installer)
    $RNMBNAV.post_install(installer)
    installer.pods_project.targets.each do |target|
      if target.name == 'react-native-google-maps'
        target.build_configurations.each do |config|
          config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
        end
      end
    end
  end
end

And this is how I use the component <MapboxNavigation />

<View style={{ height: mapHeight }}>
          <MapboxNavigation
            origin={[origin.latitude, origin.longitude].reverse()}
            destination={[
              destination.latitude,
              destination.longitude,
            ].reverse()}
            shouldSimulateRoute={true}
           showsEndOfRouteFeedback={false}
            onLocationChange={(event) => {
              const { latitude, longitude } = event.nativeEvent;
            }}
            onRouteProgressChange={(event) => {
              const {
                distanceTraveled,
                durationRemaining,
                fractionTraveled,
                distanceRemaining,
              } = event.nativeEvent;
              dispatch(
                addTrip({
                  distance: distanceTraveled,
                  duration: durationRemaining,
                })
              );
            }}
            onError={(event) => {
              const { message } = event.nativeEvent;
            }}
            onCancelNavigation={() => {
              console.log("CANCEL NAVIGATION");
              // User tapped the "X" cancel button in the nav UI
              // or canceled via the OS system tray on android.
              // Do whatever you need to here.
            }}
            onArrive={() => {
              console.log("ARRIVED");
              setInRide(false);
              // Called when you arrive at the destination.
            }}
          />

[rossmartin]

With showsEndOfRouteFeedback={false} you shouldn't be seeing the arrived banner as shown here - https://github.com/homeeondemand/react-native-mapbox-navigation/issues/15

Is this what you're talking about?

[zoolle]

I still get it even if I use showsEndOfRouteFeedback={false} and for now I've managed to wrap the component in a inRide variable that also helped me to re-render the route once destination point is changed. But for this I would suggest to use navigationViewController:shouldRerouteFromLocation:, navigationViewController:willRerouteFromLocation: and navigationViewController:didRerouteAlongRoute:

[rossmartin]

I haven't been able to reproduce the banner still showing on ios or android. I'll leave this open for now.

[singh-prabh]

I am also getting the banner even if I am using showsEndOfRouteFeedback={false}, also in different language

[mccooll]

@singh-prabh you could remove the if block code in iOS/MapboxNavigationView.swift

   func navigationViewControllerDidDismiss(_ navigationViewController: NavigationViewController, byCanceling canceled: Bool) {    
-    if (!canceled) {
-      return;
-    }
-    
     onCancelNavigation?(["message": ""]);
   }