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]);