Tracking user location in real-time is a powerful feature for many mobile applications — whether it's food delivery, ride-hailing, or in our case: a mobile barber app that shows the barber approaching the customer.

In this tutorial, I’ll walk you through how I built a real-time location tracking feature using:

• React Native + Expo
• Firebase Firestore
• Google Maps & Distance Matrix API

Let’s dive in! 🧠

✨ What We’re Building

We’ll build a Map Page that does the following:

✅ Tracks the barber’s location in real time
✅ Updates the Firebase database with the latest location
✅ Shows a route from barber to customer using Google Maps Directions
✅ Automatically navigates back when the barber is near (within 30 meters)

🔧 Tools & Dependencies

We’ll use these tools:

npm install react-native-maps react-native-maps-directions expo-location
npm install @react-native-async-storage/async-storage
npm install firebase axios

🔑 Don’t forget to:

• Set up Firebase Firestore with two collections: Barbers and CustomersGet
• Google Maps API Key (with Distance Matrix and Directions API enabled)

📲 Flowchart: What Happens Behind the Scenes

User opens MapTrackingPage
     ↓
Request Location Permission
     ↓
Fetch user destination from Firestore
     ↓
Every 10 seconds:
   ├─ Track barber location
   ├─ Save to Firebase (Barbers/1)
   ├─ Fetch user location
   ├─ Call Distance Matrix API
   └─ If distance < 30 meters → goBack()

🧠 The Core Code Explained

Here’s a breakdown of the main parts of the feature.

1. 🎯 State Initialization

const [barberLocation, setBarberLocation] = useState({
  latitude: 0,
  longitude: 0,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,
});

We define both barber and customer location with default regions.

2. 🎛️ Request Location Permission

let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== "granted") {
  throw new Error("Location permission denied");
}

We need permission before tracking the user.

3. 🛰️ Real-Time Location Tracking

Every 10 seconds, we:

• Fetch the barber's live location
• Update Firestore
• Calculate the distance to the customer

await Location.watchPositionAsync(
  { enableHighAccuracy: true, timeInterval: 20 },
  async (location) => {
    const docRef = doc(db, "Barbers", "1");
    await updateDoc(docRef, {
      location: {
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      },
    });
  }
);

4. 📍 Get Customer Location

From Customers/1, we fetch the customer’s saved location:

const docRef = doc(db, "Customers", "1");
const docSnap = await getDoc(docRef);
setUserLocation({
  latitude: docSnap.data().location.latitude,
  longitude: docSnap.data().location.longitude,
});

5. 🧮 Distance Calculation

We use the Google Distance Matrix API to calculate the distance between barber and user:

const url = `https://maps.googleapis.com/maps/api/distancematrix/json?origins=${barberLat},${barberLong}&destinations=${userLat},${userLong}&key=${GOOGLE_MAPS_APIKEY}`;
const { data } = await axios.get(url);

const distance = parseFloat(data.rows[0].elements[0].distance.text) * 1000;
if (distance < 30) {
  navigation.goBack(); // Barber has arrived
}

6. 🗺️ Displaying Markers & Route

We use react-native-maps and MapViewDirections to show everything visually:

<MapView>
  <Marker coordinate={barberLocation} />
  <Marker coordinate={userLocation} />
  <MapViewDirections
    origin={barberLocation}
    destination={userLocation}
    apikey={GOOGLE_MAPS_APIKEY}
    strokeWidth={3}
    strokeColor="red"
  />
</MapView>

🛡️ Tips for Production

Before deploying, keep these in mind:

🔚 Conclusion

And that’s it! We now have a real-time tracking page that:

• Tracks barber location
• Shows live updates on the map
• Notifies user when the barber is nearby

This feature adds a premium user experience to any location-based service.