Its shocking that react-native-geolocation package is unable to show the real-time heading of an android device despite the lat and lng are updated in real-time and the device moves. I refrain from using onLocationChange which is built into google maps it self because it will put a blue circular icon which I have not way of getting around that. I prefer to use my own marker icon. I have followed the instruction on the github page and still the heading does not update. I resulted to use the sensors on the device only to use my two devices and they all don’t have magnetometer. I have to gracefully exit and handle if the device has no magnetometer. I tried to go around using gyroscope but my devices don’t have that either. I was shocked part two, because there are hardware modules available for a long time. I am back at fixing geolocation or if there is a way of removing the blue icon that comes with onLocationChange. Regardless examine my code and see if there are any gaps.
React.useEffect(() => {
Geolocation.requestAuthorization(() => {});
if (!origin && !destination && !recordingMode) {
if (watchId !== null) {
Geolocation.clearWatch(watchId);
setWatchId(null);
}
const noSaveWatchId = Geolocation.watchPosition(
(position) => {
const {
latitude,
longitude,
altitude,
accuracy,
speed,
heading: geoHeading,
altitudeAccuracy,
} = position.coords;
setCurrentPosition({
coordinate: { latitude, longitude },
altitude: altitude as number,
timestamp: position.timestamp,
accuracy: accuracy,
speed: speed as number,
heading: heading || (geoHeading as number),
altitudeAccuracy: altitudeAccuracy as number,
isFromMockProvider: (position as any).mocked,
});
},
(error) => console.log(error),
{
enableHighAccuracy: true,
distanceFilter: 0,
interval: 5000,
fastestInterval: 2000,
}
);
setWatchId(noSaveWatchId);
return () => {
if (noSaveWatchId !== null) {
Geolocation.clearWatch(noSaveWatchId);
}
};
} else if (origin && destination && recordingMode) {
if (watchId !== null) {
Geolocation.clearWatch(watchId);
setWatchId(null);
}
const saveWatchId = Geolocation.watchPosition(
(position) => {
const {
latitude,
longitude,
altitude,
accuracy,
speed,
heading: geoHeading,
altitudeAccuracy,
} = position.coords;
const bearing: number = calculateBearing(
latitude,
longitude,
destination.latitude,
destination.longitude
);
setCurrentPosition({
coordinate: { latitude, longitude },
altitude: altitude as number,
timestamp: position.timestamp,
accuracy: accuracy,
speed: speed as number,
heading: heading || bearing || (geoHeading as number),
altitudeAccuracy: altitudeAccuracy as number,
isFromMockProvider: (position as any).mocked,
});
if (
state &&
state.location.lat !== latitude &&
state.location.lng !== longitude
// state.location.heading !== heading
) {
dispatch({
type: Types.SetLocation,
payload: {
lat: latitude ?? 0,
lng: longitude ?? 0,
heading: heading ?? 0,
},
});
} else return;
makeLogEntry({
latitude,
longitude,
heading: heading || undefined,
})
.then(() => console.log("Log made successfully"))
.catch((error) => console.log("Error making log entry:", error));
},
(error) => console.log(error),
{
enableHighAccuracy: true,
distanceFilter: 0,
interval: 5000,
fastestInterval: 2000,
}
);
setWatchId(saveWatchId);
return () => {
if (saveWatchId !== null) {
Geolocation.clearWatch(saveWatchId);
}
};
}
}, [origin, destination, recordingMode]);