react-native-geolocation icon indicating copy to clipboard operation
react-native-geolocation copied to clipboard

watchposition() issues

Open SKHRAPP opened this issue 1 year ago • 4 comments

timeout is not workling properly why ?

code

 let watchId;
 watchId = Geolocation.watchPosition(handleSuccess, handleError, {
        timeout: 1000,
        enableHighAccuracy: true,
        interval: 15 * 60 * 1000,
        maximumAge: 3000,
      });


  const handleError = error => {
        console.log(error, 'error dataaa');
        Geolocation.clearWatch(watchId);
      };

  const handleSuccess = async position => {
        let data = {
          latitude: parseFloat(position.coords.latitude).toFixed(6),
          longitude: parseFloat(position.coords.longitude).toFixed(6),
        };
        console.log(data, 'dataaaa');
     Geolocation.clearWatch(watchId);
      };

SKHRAPP avatar Oct 24 '24 09:10 SKHRAPP

I also have watch position issues that I have been trying to fix for a month now. Arguably some people have issues of getting all of geolocation responses in particular heading, speed and timestamp. I have a post on stackoverflow Please I need some help with this as soon as possible. This is my code

React.useEffect(() => {
    Geolocation.requestAuthorization(
      (_success?: any) => {
        console.log("Location permission requested successfully");
      },
      (error?: GeolocationError) => {
        console.log("Error requesting location permission:", error);
      }
    );
    if (!origin && !destination && !recordingMode) {
      if (watchId !== null) {
        Geolocation.clearWatch(watchId);
        setWatchId(null);
      }
      const noSaveWatchId = Geolocation.watchPosition(
        (position: GeolocationResponse) => {
          const {
            latitude,
            longitude,
            altitude,
            accuracy,
            speed,
            heading: geoHeading,
            altitudeAccuracy,
          } = position.coords;
          const { timestamp } = position;

          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,
            timeStamp: timestamp,
          });
        },
        (error: GeolocationError) => 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: GeolocationResponse) => {
          const {
            latitude,
            longitude,
            altitude,
            accuracy,
            speed,
            heading: geoHeading,
            altitudeAccuracy,
          } = position.coords;
          const { timestamp } = position;

          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,
            timeStamp: timestamp,
          });

          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: GeolocationError) => console.log(error),
        {
          enableHighAccuracy: true,
          distanceFilter: 0,
          interval: 5000,
          fastestInterval: 2000,
        }
      );
      setWatchId(saveWatchId);

      return () => {
        if (saveWatchId !== null) {
          Geolocation.clearWatch(saveWatchId);
        }
      };
    }
  }, [origin, destination, recordingMode]);

I am able to receive lng and lat accurately but heading is always '0'

noobix avatar Oct 27 '24 16:10 noobix

@SKHRAPP Updating the package to 3.4.0, and including the location state in the dependency hook fixed the issue for me!

export const useUserLocation = () => {
  const [location, setLocation] = useState<GeolocationResponse>();

  useEffect(() => {
    const locationWatcherId = Geolocation.watchPosition(
      position => {
        setLocation(position);
        void saveLocationInCache(position);
      },
      () => {
        void getCachedLocation().then(cachedLocation => {
          if (cachedLocation) {
            setLocation(cachedLocation);
          }
        });
      },
      {
        enableHighAccuracy: true,
        timeout: 5000,
        // 15 minutes
        interval: 15 * 60 * 1000,
        // 5 minutes
        maximumAge: 5 * 60 * 1000,
      },
    );

    return () => {
      Geolocation.clearWatch(locationWatcherId);
    };
  }, [location?.coords]);

  return location;
};

tabbathacrouch avatar Mar 06 '25 16:03 tabbathacrouch

@SKHRAPP Updating the package to 3.4.0, and including the location state in the dependency hook fixed the issue for me!

export const useUserLocation = () => {
  const [location, setLocation] = useState<GeolocationResponse>();

  useEffect(() => {
    const locationWatcherId = Geolocation.watchPosition(
      position => {
        setLocation(position);
        void saveLocationInCache(position);
      },
      () => {
        void getCachedLocation().then(cachedLocation => {
          if (cachedLocation) {
            setLocation(cachedLocation);
          }
        });
      },
      {
        enableHighAccuracy: true,
        timeout: 5000,
        // 15 minutes
        interval: 15 * 60 * 1000,
        // 5 minutes
        maximumAge: 5 * 60 * 1000,
      },
    );

    return () => {
      Geolocation.clearWatch(locationWatcherId);
    };
  }, [location?.coords]);

  return location;
};

@tabbathacrouch which react native version and react are you using?

abdulwahid211 avatar Apr 13 '25 03:04 abdulwahid211

@SKHRAPP Updating the package to 3.4.0, and including the location state in the dependency hook fixed the issue for me!

export const useUserLocation = () => {
  const [location, setLocation] = useState<GeolocationResponse>();

  useEffect(() => {
    const locationWatcherId = Geolocation.watchPosition(
      position => {
        setLocation(position);
        void saveLocationInCache(position);
      },
      () => {
        void getCachedLocation().then(cachedLocation => {
          if (cachedLocation) {
            setLocation(cachedLocation);
          }
        });
      },
      {
        enableHighAccuracy: true,
        timeout: 5000,
        // 15 minutes
        interval: 15 * 60 * 1000,
        // 5 minutes
        maximumAge: 5 * 60 * 1000,
      },
    );

    return () => {
      Geolocation.clearWatch(locationWatcherId);
    };
  }, [location?.coords]);

  return location;
};

@tabbathacrouch which react native version and react are you using?

version 20.11.1

noobix avatar Apr 14 '25 19:04 noobix