[Android] App crashed when I click the x icon on the bottom banner or navigate away from the navigation screen

[rmdevtorres]

Hi everyone,

I am facing issue with react-native-mapbox-navigation crashed as described in the title.

Basically I have a navigation component like this:

const OrderNavigationComponent = ({ order }) => {
  const navigation = useNavigation();

  const geoPoint = useShallowEqualSelector(
    (state) => state.systemReducer.geoPoint
  );

  const handleQuitNavigation = () => {
    if (navigation.canGoBack()) {
      navigation.goBack();
    } else {
      navigation.navigate(RouteName.OrderNavigator, {
        screen: RouteName.OrderDetail,
        params: {
          order,
        },
      });
    }
  };

  const origin = [geoPoint.longitude, geoPoint.latitude];
  const destination =
    order.orderStatus === OrderStatus.ACCEPTED
      ? [order.partner.geoPoint.longitude, order.partner.geoPoint.latitude]
      : [order.customer.geoPoint.longitude, order.customer.geoPoint.latitude];

  return (
    <View style={styles.container}>
      <MapboxNavigation
        origin={origin}
        destination={destination}
        shouldSimulateRoute={true}
        showsEndOfRouteFeedback
        onLocationChange={(event) => {
          const { latitude, longitude } = event.nativeEvent;
        }}
        onRouteProgressChange={(event) => {
          const {
            distanceTraveled,
            durationRemaining,
            fractionTraveled,
            distanceRemaining,
          } = event.nativeEvent;
        }}
        onError={(event) => {
          const { message } = event.nativeEvent;
          if (__DEV__) {
            console.log("Navigation error out with error: ", error);
          }
          // handleQuitNavigation();
        }}
        onCancelNavigation={() => {
          console.log("Cancel");
          handleQuitNavigation();
        }}
        onArrive={() => {}}
      />
    </View>
  );
};

When I click the x icon, it will invoke the handleQuitNavigation() where it will navigate to Order screen. However, what I experience is that it just crashed without any error thrown.

Have anyone experience the same thing before, and may know how to overcome this?

[rossmartin]

There could be an issue with origin and destination not being set correctly when deriving from geoPoint. I suggest verifying that you have valid values for origin and destination before rendering MapboxNavigation.

Do you experience the same issue using the example in the README? You could use the values provided there for origin and destination or provide your own static values.

[rmdevtorres]

There could be an issue with origin and destination not being set correctly when deriving from geoPoint. I suggest verifying that you have valid values for origin and destination before rendering MapboxNavigation.

Do you experience the same issue using the example in the README? You could use the values provided there for origin and destination or provide your own static values.

@rossmartin Hi Ross, thanks for the reply, and yeah I have tried your example code snippet and same thing happened.

However, this time, I am able to capture some errors, but I am not too sure what it means:

Can you help take a look?

[rossmartin]

@rossmartin Hi Ross, thanks for the reply, and yeah I have tried your example code snippet and same thing happened.

However, this time, I am able to capture some errors, but I am not too sure what it means:

Can you help take a look?

That's strange I'm unable to reproduce it using the latest version (1.0.7). What API number is the android device that you are using? Are you calling navigation.goBack() within onCancelNavigation ?

[rmdevtorres]

@rossmartin Hi Ross, sorry for the late reply, here is my android API number:

buildscript {
    ext {
        buildToolsVersion = "30.0.2"
        minSdkVersion = 21
        compileSdkVersion = 30
        targetSdkVersion = 30
        googlePlayServicesVersion = "+"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.4")
        classpath 'com.google.gms:google-services:4.3.4'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

I didn't call the navigation.goBack() within onCancelNavigation but wrap it in this method called: handleQuitNavigation. Like below:

  const handleQuitNavigation = () => {
    if (navigation.canGoBack()) {
      navigation.goBack();
    } else {
      navigation.navigate(RouteName.OrderNavigator, {
        screen: RouteName.OrderDetail,
        params: {
          orderId: order.orderId,
        },
      });
    }
  };

  onCancelNavigation={() => {
    handleQuitNavigation();
  }}

[rossmartin]

@rossmartin Hi Ross, sorry for the late reply, here is my android API number:

buildscript {
    ext {
        buildToolsVersion = "30.0.2"
        minSdkVersion = 21
        compileSdkVersion = 30
        targetSdkVersion = 30
        googlePlayServicesVersion = "+"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.4")
        classpath 'com.google.gms:google-services:4.3.4'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

Thank you for providing the extra info and the code snippet. Sorry for the confusion - when I ask what API level is your device I'm referring to the API level that the physical device or emulator is running (not the API level in your config).

I don't see any smoking guns for why this crash would occur.

[rmdevtorres]

@rossmartin Hi Ross, sorry for the late reply, here is my android API number:

buildscript {
    ext {
        buildToolsVersion = "30.0.2"
        minSdkVersion = 21
        compileSdkVersion = 30
        targetSdkVersion = 30
        googlePlayServicesVersion = "+"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.4")
        classpath 'com.google.gms:google-services:4.3.4'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

Thank you for providing the extra info and the code snippet. Sorry for the confusion - when I ask what API level is your device I'm referring to the API level that the physical device or emulator is running (not the API level in your config).

I don't see any smoking guns for why this crash would occur.

@rossmartin yes my physical device is running on android 10 and api level 29

[kayowakmelese]

you can make the mapbox navigation not displayed like put it inside a condition statement with a state and change the state value to not display the mapboxnavigation and then use setTimeout to navigate into another pages.i was searching everywhere for the solution but it worked for me like this

[shreesols]

const OrderNavigationComponent = ({ order }) => { const navigation = useNavigation();

const geoPoint = useShallowEqualSelector( (state) => state.systemReducer.geoPoint ); const {isStoped}=false; const handleQuitNavigation = () => { isStoped=true; setTimeout(() => { if (navigation.canGoBack()) { navigation.goBack(); } else { navigation.navigate(RouteName.OrderNavigator, { screen: RouteName.OrderDetail, params: { order, }, }); } }, 5000)

};

const origin = [geoPoint.longitude, geoPoint.latitude]; const destination = order.orderStatus === OrderStatus.ACCEPTED ? [order.partner.geoPoint.longitude, order.partner.geoPoint.latitude] : [order.customer.geoPoint.longitude, order.customer.geoPoint.latitude];

return ( I was face same issue, but now I handle using set timeout Here is my solution const {isStoped}=false; const handleQuitNavigation = () => { isStoped=true; setTimeout(() => { if (navigation.canGoBack()) { navigation.goBack(); } else { navigation.navigate(RouteName.OrderNavigator, { screen: RouteName.OrderDetail, params: { order, }, }); } }, 5000)

};

---

{ isStoped==false? { const { latitude, longitude } = event.nativeEvent; }} onRouteProgressChange={(event) => { const { distanceTraveled, durationRemaining, fractionTraveled, distanceRemaining, } = event.nativeEvent; }} onError={(event) => { const { message } = event.nativeEvent; if (__DEV__) { console.log("Navigation error out with error: ", error); } // handleQuitNavigation(); }} onCancelNavigation={() => { console.log("Cancel"); handleQuitNavigation(); }} onArrive={() => {}} /> : Stopping Navigation..... } }

</View>

); };

[kayowakmelese]

so this issue is resolved!