When I try to use @pawan-pk/react-native-mapbox-navigation, the component often fails to start navigation. Instead of showing a route, it zooms out to Earth and triggers the error callback:
{"error": "origin and destination are required"}
This happens inconsistently and when changing the prop like distanceUnit makes it work again showing navigation screen
my Code
`import * as React from 'react';
import {View, StyleSheet} from 'react-native';
import MapboxNavigation from '@pawan-pk/react-native-mapbox-navigation';
export default function LiveMapNavigation() {
const [myLoc, setMyLoc] = React.useState(null);
const [myDes, setMyDes] = React.useState(null);
React.useEffect(() => {
// Mock current location
const loc = { latitude: 25.4112415, longitude: 68.2716404 };
const des = { latitude: 25.4162415, longitude: 68.2766404 };
setMyLoc(loc);
setMyDes(des);
}, []);
if (!myLoc || !myDes) return null;
return (
<MapboxNavigation
startOrigin={myLoc}
destination={{
...myDes,
title: 'Pickup',
}}
travelMode="driving-traffic"
style={styles.container}
shouldSimulateRoute={true}
showCancelButton={true}
language="en"
distanceUnit="metric"
onError={(err) => {
console.log('onError', err);
}}
/>
);
}
const styles = StyleSheet.create({
container: {flex: 1},
});`
Expected Behavior:
The navigation view should start routing between the given origin and destination reliably.
Changing distanceUnit should not affect whether the component works or fails.
Actual Behavior:
the view shows only Earth.
onError fires with {"error": "origin and destination are required"} even though both are provided.
toggling prop (distanceUnit) makes it work again.
Environment:
React Native: 0.71.3
@pawan-pk/react-native-mapbox-navigation: 0.5.2
Platform: Android

When I try to use @pawan-pk/react-native-mapbox-navigation, the component often fails to start navigation. Instead of showing a route, it zooms out to Earth and triggers the error callback:
{"error": "origin and destination are required"}This happens inconsistently and when changing the prop like distanceUnit makes it work again showing navigation screen
my Code
`import * as React from 'react';
import {View, StyleSheet} from 'react-native';
import MapboxNavigation from '@pawan-pk/react-native-mapbox-navigation';
export default function LiveMapNavigation() {
const [myLoc, setMyLoc] = React.useState(null);
const [myDes, setMyDes] = React.useState(null);
React.useEffect(() => {
// Mock current location
const loc = { latitude: 25.4112415, longitude: 68.2716404 };
const des = { latitude: 25.4162415, longitude: 68.2766404 };
setMyLoc(loc);
setMyDes(des);
}, []);
if (!myLoc || !myDes) return null;
return (
<MapboxNavigation
startOrigin={myLoc}
destination={{
...myDes,
title: 'Pickup',
}}
travelMode="driving-traffic"
style={styles.container}
shouldSimulateRoute={true}
showCancelButton={true}
language="en"
distanceUnit="metric"
onError={(err) => {
console.log('onError', err);
}}
/>
);
}
const styles = StyleSheet.create({
container: {flex: 1},
});`
Expected Behavior:
The navigation view should start routing between the given origin and destination reliably.
Changing distanceUnit should not affect whether the component works or fails.
Actual Behavior:
the view shows only Earth.
onError fires with {"error": "origin and destination are required"} even though both are provided.
toggling prop (distanceUnit) makes it work again.
Environment:
React Native: 0.71.3
@pawan-pk/react-native-mapbox-navigation: 0.5.2
Platform: Android