{"id":"l-rn-4-4","courseId":"react-native-apps","lang":"en","kind":"lesson","summary":"Track a hike’s route with expo-location, attach trail photos with expo-image-picker, and schedule a reminder with expo-notifications, cleaning up subscriptions and filtering noisy GPS data.","html":"

Three device features make Trailhead more than a list: the route you walked, the photos you took, and a nudge at the end of the day to log the hike you forgot. They use three Expo modules with a lot in common: each needs a permission (asked the way the last lesson showed), each returns data you’ll store with the tools from two lessons ago, and each has one detail that bites if you skip it.

\n

Tracking a route

\n

getCurrentPositionAsync gives you one reading, which is enough to tag where a hike started. Tracking needs a stream: watchPositionAsync calls your function with each new position and returns a subscription that keeps the GPS running until you remove it.

\n
src/hooks/useRoute.ts
import * as Location from 'expo-location';\nimport { useEffect, useState } from 'react';\n\nexport type Point = { latitude: number; longitude: number; accuracy: number | null; timestamp: number };\n\nexport function useRoute(active: boolean) {\n  const [points, setPoints] = useState<Point[]>([]);\n\n  useEffect(() => {\n    if (!active) return;\n    let subscription: Location.LocationSubscription | undefined;\n    let cancelled = false;\n\n    Location.watchPositionAsync(\n      { accuracy: Location.Accuracy.High, distanceInterval: 10, timeInterval: 5000 },\n      ({ coords, timestamp }) => {\n        setPoints((prev) => [...prev, { latitude: coords.latitude, longitude: coords.longitude, accuracy: coords.accuracy, timestamp }]);\n      },\n    ).then((sub) => {\n      if (cancelled) sub.remove();\n      else subscription = sub;\n    });\n\n    return () => {\n      cancelled = true;\n      subscription?.remove();\n    };\n  }, [active]);\n\n  return points;\n}
\n

The cancelled flag handles a subtle race: the subscription arrives asynchronously, so if the screen unmounts before the promise resolves, the cleanup has nothing to remove yet. The flag makes the late subscription remove itself.

\n

Appending to an array in state on every reading is fine for a few thousand points, which covers a long day hike. For multi-day tracks, write points to SQLite in batches and keep only the recent ones in memory, so a single state update never copies tens of thousands of objects.

\n

The options are a battery budget. Accuracy.High asks for a precision of about ten meters; Balanced is about a hundred meters and much cheaper. distanceInterval: 10 means “only call me after moving ten meters”, and timeInterval caps the frequency on Android. A hiking track needs high accuracy but not a point every second.

\n\n

Tracking with the screen locked needs background location and a task registered with expo-task-manager, plus the extra permission and review scrutiny from the last lesson. Ship foreground tracking first; many hikers keep the screen on to see the map anyway.

\n

Trail photos

\n

For photos, expo-image-picker opens the system’s own photo library or camera UI, which is familiar to users and handles editing for you:

\n
TSX
import * as ImagePicker from 'expo-image-picker';\n\nasync function addPhoto(fromCamera: boolean) {\n  const options: ImagePicker.ImagePickerOptions = { mediaTypes: ['images'], quality: 0.7, allowsEditing: true };\n\n  if (fromCamera) {\n    const permission = await ImagePicker.requestCameraPermissionsAsync();\n    if (!permission.granted) return;\n  }\n\n  const result = fromCamera\n    ? await ImagePicker.launchCameraAsync(options)\n    : await ImagePicker.launchImageLibraryAsync(options);\n\n  if (result.canceled) return;\n  const uri = result.assets[0].uri;\n  // copy into the app's document directory, then save the new path on the hike\n}
\n

quality: 0.7 compresses the JPEG, which matters when a hike has twenty photos. Cancelling isn’t an error: the promise resolves with canceled: true. And the returned uri points into a cache directory the system may clear, so copy the file into your app’s document directory with expo-file-system and store that path in SQLite, as the storage lesson described. The iOS Simulator has no camera, so test camera capture on a real phone.

\n

When you need your own camera interface, such as scanning QR codes on trail markers, use expo-camera, whose CameraView component renders a live preview inside your layout.

\n

A reminder notification

\n

Hikers forget to log hikes. A daily reminder at 7 pm, only on days they’ve turned it on, is a local notification: scheduled on the device, no server involved.

\n
src/lib/reminders.ts
import * as Notifications from 'expo-notifications';\nimport { Platform } from 'react-native';\n\nNotifications.setNotificationHandler({\n  handleNotification: async () => ({\n    shouldShowBanner: true,\n    shouldShowList: true,\n    shouldPlaySound: false,\n    shouldSetBadge: false,\n  }),\n});\n\nexport async function enableDailyReminder() {\n  if (Platform.OS === 'android') {\n    await Notifications.setNotificationChannelAsync('reminders', {\n      name: 'Hike reminders',\n      importance: Notifications.AndroidImportance.DEFAULT,\n    });\n  }\n  const { granted } = await Notifications.requestPermissionsAsync();\n  if (!granted) return false;\n\n  await Notifications.cancelAllScheduledNotificationsAsync();\n  await Notifications.scheduleNotificationAsync({\n    content: { title: 'Out on a trail today?', body: 'Log it while you remember the details.', data: { url: '/new-hike' } },\n    trigger: { type: Notifications.SchedulableTriggerInputTypes.DAILY, hour: 19, minute: 0, channelId: 'reminders' },\n  });\n  return true;\n}
\n

setNotificationHandler decides whether a notification shows while the app is open. On Android, notifications belong to channels that users can mute individually in Settings, so create a clearly named one. Cancelling before scheduling avoids stacking duplicate reminders each time the setting is toggled.

\n

The data.url pays off with Expo Router: in the root layout, listen with Notifications.addNotificationResponseReceivedListener, read response.notification.request.content.data.url, and call router.push(url). Tapping the reminder then opens the add-hike modal directly, through the same routes your deep links use.

\n

Push notifications, sent from a server, need more: a development build, credentials for Apple’s and Google’s push services (EAS manages them), and a push token sent to your backend. The scheduling and handling code you just wrote stays the same.

\n

Section 5 is about getting all of this into users’ hands: debugging, testing and shipping.

\n","toc":[{"id":"sec-1","text":"Tracking a route","level":2},{"id":"sec-2","text":"Trail photos","level":2},{"id":"sec-3","text":"A reminder notification","level":2}],"takeaways":["watchPositionAsync streams positions until you call remove() on the subscription it returns, so remove it in the effect’s cleanup.","Accuracy and update intervals trade precision for battery; choose the least precise settings the feature can live with.","GPS readings are noisy, so drop points with poor accuracy before computing distance.","expo-image-picker returns canceled plus an assets array; picked files start in a cache, so copy anything you keep.","Local notifications are scheduled on the device with a trigger, and data can carry the route to open when the user taps them."],"further":[{"title":"Location","url":"https://docs.expo.dev/versions/latest/sdk/location/"},{"title":"ImagePicker","url":"https://docs.expo.dev/versions/latest/sdk/imagepicker/"},{"title":"Notifications","url":"https://docs.expo.dev/versions/latest/sdk/notifications/"}],"quiz":[{"q":"

Trailhead’s tracking screen calls watchPositionAsync in an effect but never stores the result. What happens after the user leaves the screen?

","options":[{"text":"The subscription stops automatically when the component unmounts.","why":"Native subscriptions don’t know about your component. Only remove() stops them."},{"text":"The app crashes the next time a position arrives.","why":"The callback still runs; React just ignores state updates for the unmounted screen. It’s a silent leak, not a crash."},{"text":"Nothing, because location only updates while the screen is visible.","why":"Foreground location keeps updating while the app is open, whatever screen is showing."},{"text":"GPS keeps running and draining the battery, because nothing called remove() on the subscription.","why":"Correct. Store the subscription and call subscription.remove() in the effect’s cleanup."}],"answer":3},{"q":"

A recorded track jumps 400 m sideways for one point while the hiker stood still under trees. What’s the best response in code?

","options":[{"text":"Request Accuracy.BestForNavigation so the GPS never makes mistakes.","why":"Higher accuracy settings reduce error but can’t eliminate it, and they cost more battery."},{"text":"Discard points whose reported coords.accuracy is worse than a threshold, such as 25 m, before adding them to the route.","why":"Correct. Each reading reports its own uncertainty radius; filtering out the bad ones keeps the route and the distance honest."},{"text":"Round all coordinates to two decimal places.","why":"Two decimal places of latitude is about 1 km of precision, which destroys the route."}],"answer":1},{"q":"

After launchImageLibraryAsync, the user backs out without choosing. What does your code see?

","options":[{"text":"The promise rejects with a “cancelled” error.","why":"Cancelling isn’t an error. The promise resolves normally."},{"text":"The promise never resolves.","why":"It resolves as soon as the picker closes, whatever the user did."},{"text":"A result with canceled: true and no assets, which you should handle by doing nothing.","why":"Correct. Check if (result.canceled) return; before reading result.assets[0].uri."}],"answer":2}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// Total distance of a recorded route in km, rounded to 2 decimals.\n// Ignore points whose accuracy (meters) is worse than maxAccuracyM.\nfunction trackDistanceKm(points, maxAccuracyM = 25) {\n let total = 0;\n for (let i = 1; i < points.length; i++) {\n const dLat = points[i].latitude - points[i - 1].latitude;\n const dLon = points[i].longitude - points[i - 1].longitude;\n total += Math.sqrt(dLat * dLat + dLon * dLon);\n }\n return total;\n}\n\nconst route = [\n { latitude: 46.5, longitude: 7.9, accuracy: 8 },\n { latitude: 46.51, longitude: 7.9, accuracy: 12 },\n { latitude: 46.53, longitude: 7.95, accuracy: 90 },\n { latitude: 46.51, longitude: 7.92, accuracy: 10 },\n];\nconsole.log(trackDistanceKm(route), 'km');\n"},"solution":{"js":"const EARTH_RADIUS_KM = 6371;\nconst toRad = (deg) => (deg * Math.PI) / 180;\n\nfunction haversineKm(a, b) {\n const dLat = toRad(b.latitude - a.latitude);\n const dLon = toRad(b.longitude - a.longitude);\n const h = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(a.latitude)) * Math.cos(toRad(b.latitude)) * Math.sin(dLon / 2) ** 2;\n return 2 * EARTH_RADIUS_KM * Math.asin(Math.sqrt(h));\n}\n\nfunction trackDistanceKm(points, maxAccuracyM = 25) {\n const good = points.filter((p) => p.accuracy == null || p.accuracy <= maxAccuracyM);\n let total = 0;\n for (let i = 1; i < good.length; i++) total += haversineKm(good[i - 1], good[i]);\n return Math.round(total * 100) / 100;\n}\n\nconst route = [\n { latitude: 46.5, longitude: 7.9, accuracy: 8 },\n { latitude: 46.51, longitude: 7.9, accuracy: 12 },\n { latitude: 46.53, longitude: 7.95, accuracy: 90 },\n { latitude: 46.51, longitude: 7.92, accuracy: 10 },\n];\nconsole.log(trackDistanceKm(route), 'km');\n"},"checks":[{"id":"one-step","test":"const p = (latitude, longitude, accuracy = 5) => ({ latitude, longitude, accuracy }); return typeof trackDistanceKm === 'function' && trackDistanceKm([p(0, 0), p(0.01, 0)]) === 1.11;"},{"id":"sums-route","test":"const p = (latitude, longitude, accuracy = 5) => ({ latitude, longitude, accuracy }); return trackDistanceKm([p(46.5, 7.9), p(46.51, 7.9), p(46.51, 7.92)]) === 2.64;"},{"id":"drops-inaccurate","test":"const p = (latitude, longitude, accuracy = 5) => ({ latitude, longitude, accuracy }); return trackDistanceKm([p(46.5, 7.9, 8), p(46.51, 7.9, 12), p(46.53, 7.95, 90), p(46.51, 7.92, 10)]) === 2.64;"},{"id":"custom-threshold","test":"const p = (latitude, longitude, accuracy = 5) => ({ latitude, longitude, accuracy }); return trackDistanceKm([p(0, 0, 5), p(0.01, 0, 40), p(0.02, 0, 5)], 50) === 2.22 && trackDistanceKm([p(0, 0, 5), p(0.01, 0, 40), p(0.02, 0, 5)], 30) === 2.22;"},{"id":"short-input","test":"const p = (latitude, longitude, accuracy = 5) => ({ latitude, longitude, accuracy }); return trackDistanceKm([]) === 0 && trackDistanceKm([p(1, 1)]) === 0 && trackDistanceKm([p(1, 1, 99), p(1.01, 1, 99)]) === 0;"},{"id":"null-accuracy","test":"const p = (latitude, longitude, accuracy = 5) => ({ latitude, longitude, accuracy }); return trackDistanceKm([p(0, 0, null), p(0.01, 0, null)]) === 1.11;"}],"title":"Measure a GPS track","prompt":"

Fix trackDistanceKm(points, maxAccuracyM = 25) so Trailhead shows the real length of a recorded hike. Each point has latitude, longitude (degrees) and accuracy (meters, or null when unknown).

\n\n

The starter treats degrees as flat coordinates, which is wrong everywhere and badly wrong far from the equator.

\n","hints":["Filter first: points.filter((p) => p.accuracy == null || p.accuracy <= maxAccuracyM).","Haversine: convert the latitude and longitude differences to radians, then h = sin²(dLat/2) + cos(lat1)·cos(lat2)·sin²(dLon/2) and distance = 2 · 6371 · asin(√h).","Round once at the end with Math.round(total * 100) / 100, not after each step, or the rounding errors add up."],"explanation":"

Degrees aren’t a flat grid: one degree of longitude shrinks from about 111 km at the equator to zero at the poles, so the starter’s Pythagoras on raw degrees gave nonsense. The haversine formula measures along the Earth’s surface, which is accurate to well within a GPS reading’s own error for hiking distances. Filtering by accuracy before summing removes the zigzags that otherwise add fake kilometers under trees. The function is pure, so the tracking screen can call it on every new point, or you can compute it once when the hike is saved.

\n","checkLabels":{"one-step":"One step of 0.01° latitude is about 1.11 km","sums-route":"Distances along a route are added up","drops-inaccurate":"Points with poor accuracy are ignored","custom-threshold":"The accuracy threshold can be changed","short-input":"Fewer than two usable points gives 0","null-accuracy":"Points with unknown (null) accuracy are kept"}},"words":658,"readMinutes":3}