When Location Tracking Works (and You Still Panic): A React Native Adventure

Welcome to another episode of “What Fresh Bug Is This?” where I, a full time parent and part time debugger, attempt to build a rescue ready location tracking app while keeping my sanity intact (mostly).

---

The Mission

I’m building a mobile app (React Native) and web app (Next.js) for tourists in Gilgit Baltistan, with a very real use case: people get lost or have accidents in places with no cell coverage. My app should:

✅ Let mobile users send location to backend
✅ Show that location on a map (web + mobile)
✅ Cache the last known location offline
✅ Help rescuers/family track them when they go off-grid

Simple, right?

---

The Login That Works (and Finally Sends a Token)

After wiring up user registration and login, I hooked Redux into my mobile app to store the accessToken. This allowed me to protect location routes and ensure only logged-in users could send their location.

const token = useSelector((state: RootState) => state.auth.accessToken);

I also added feedback to the user:

Alert.alert("Login Success", `Welcome ${res.user.fullName}`);
navigation.navigate("Home");

---

Sending Location from Mobile

Here’s how I did it:

1. Requested foreground location permission using expo-location

2. Fetched lat/lng

3. Sent it to backend via Axios with bearer token

4. Saved it to MongoDB in the backend

const location = await Location.getCurrentPositionAsync({});
const { latitude, longitude } = location.coords;
await axios.post("/api/location/save", { lat: latitude, lng: longitude }, { headers: { Authorization: `Bearer ${token}` } });

It felt good to finally see:

Location saved successfully 🟢

---

The Real-World Use Case

The app is meant to work even in emergency mountain scenarios, where:

• Cell signals vanish

• No internet means no live tracking

So we added AsyncStorage to save the last known location offline, so:

• It can be sent to backend when internet returns

• The web app can show the last known position for families/rescuers

It’s not perfect, but in GB sometimes good enough is life saving.

---

Reverse Geocoding & City Names

Getting a lat/lng is cool. But displaying:

“Passu, Gilgit Baltistan, Pakistan”

is way more meaningful to a user than just numbers.

I considered:

• Nominatim (OpenStreetMap): free, no billing, fair usage (1 req/sec)

• Google Maps API: more accurate, but requires billing and strict quotas

I picked Nominatim for now, to stay within budget and dev sanity.

GET https://nominatim.openstreetmap.org/reverse?lat=35.5&lon=74.4&format=json

---

Choosing Map Frameworks 🗺️

I needed maps in both mobile and web versions.

Web (Next.js)

• MapLibre GL JS: Opensource, performant, no billing drama

• Leaflet: Easy but a bit old school

Mobile (React Native)

• react-native-maps works with Google/Apple Maps, easy to integrate

• Future plan: react-native-maplibre-gl for offline maps

Offline maps are ideal for GB, where signal can be lost. But we’ll phase that in later.

---

AsyncStorage (a lifesaver in no-signal zones)

In mountain areas, a user might:

• Lose signal before their location gets sent

• Be unable to call for help

We designed it so:

• Their last known location is cached offline

• When signals return, the app will try sending it again

• Families using the web app can see that cached location

It’s the tech version of dropping breadcrumbs in the forest, except it works.

---

Important Considerations

Battery: GPS polling can drain battery. We only get location:

• When user taps "Send Location"

• On SOS/fall detection trigger

Rate Limits: Nominatim (free API) allows 1 request/sec per IP, which is fine for my small user base.

Offline support: No map tiles = no visual. With MapLibre, I can cache map tiles for key GB regions.

Emergency Use: Even if user can’t send a location, their last known coordinates help rescuers.

---

Summary: Tracking Progress (and Sanity)

In this episode of “What Fresh Bug Is This?”, we strapped on our hiking boots and took our mobile app for a real adventure through the valleys of React Native, past the ridges of Redux, and into the high altitude zones of location tracking.

What I Actually Built

✅ Secure user login
✅ Redux-based token management
✅ Location tracking screen in React Native
✅ Backend API to receive and save coordinates
✅ Successful save to MongoDB
✅ “Send Location” button actually works!
✅ Accurate error logs when it doesn’t (thank you, logs)
✅ Mobile → backend → database pipeline is alive!

---

What I Thought About (A Lot) 🤔

• Unreliable connectivity

• Battery efficiency

• Offline fallback

• Accurate location (village-level + GPS pin)

• Caching with AsyncStorage

• Designing for emergencies, because let’s be honest if someone’s hanging by a rock ledge with no bars on their phone, my app’s fancy UI animations won’t save them. But a last pinged GPS with a timestamp just might.

---

How I Chose Maps & Location APIs 🗺️

I had a full on developer dharna about which map frameworks and APIs won’t:

• Drain the battery

• Drain our wallets

• Break when there's no internet

• Violate rate limits

Final Picks:

• MapLibre (for both React Native + Next.js)

• OpenStreetMap + Nominatim

• AsyncStorage

I decided against Google Maps for now because:

• They want your billing account

• They track you harder than your desi mom on Eid

• Rate limits are more forgiving elsewhere

---

Where I am Headed Next (no pun intended)

• Cache last location offline

• Automatically send when internet returns

• Show it on a map in the app

• Build a simple web dashboard so family members can see the last location

• Add SOS button + fall detection (because gravity is not always a friend)

---

If you're building a mobile app from scratch, remember: even if your app doesn’t always save lives it should at least not crash when trying.

🧭 Until next time track responsibly, debug often, and don’t forget to breathe (or hydrate).