watchPositionAsync

Learn location tracking with watchPositionAsync.

watchPositionAsync

To continuously track the location as the user moves you use Location.watchPositionAsync. This function returns a subscription; on each location change a callback is called. When the component unmounts the subscription is removed with subscription.remove().

The function takes two parameters: an options object and a callback. Example: const sub = await Location.watchPositionAsync({ accuracy: Location.Accuracy.High }, (loc) => console.log(loc.coords)). The subscription is assigned to a variable; cleanup is done in the return of useEffect. This pattern keeps the user's marker live on map apps.

useEffect and cleanup

You set up continuous location tracking inside useEffect. This hook is called once when the component mounts. You set up the subscription inside it and return a cleanup function. The cleanup function removes the subscription when the component unmounts; this stops the location updates.

Example pattern: useEffect(() => {{ (async () => {{ const sub = await Location.watchPositionAsync(...); subscriptionRef.current = sub; }})(); return () => subscriptionRef.current?.remove(); }}, []). The empty dependency array [] ensures the hook is called only once. You keep the subscription in a ref because it is created inside an async function.

Exercise Track location continuously

Complete the empty useEffect. Call const sub = await Location.watchPositionAsync({ accuracy: Location.Accuracy.High }, (loc) => console.log(loc.coords)). Clean up with return () => sub.remove(). The second argument of useEffect should be [].

Show example solution

let sub;
(async () => {
  sub = await Location.watchPositionAsync(
    { accuracy: Location.Accuracy.High },
    (loc) => console.log(loc.coords)
  );
})();
return () => sub && sub.remove();

Test yourself

Write the subscription variable

const ____ = await Location.watchPositionAsync(options, callback);

Show answer

const subscription = await Location.watchPositionAsync(options, callback);

Match each part to its role

watchPositionAsync

Tracks continuously
subscription.remove()

Removes the subscription
useEffect

Setup place
accuracy

Accuracy option
What is done when the component unmounts?
```
return () => { ??? }
```
- Open a new subscription
- Wait for a location update
- Remove the subscription with remove()
- Throw an error
Show answer

Remove the subscription with remove() — When the component unmounts, the subscription is removed with remove().

Next lesson: Geocoding

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies