Real-Time Location Tracking & Live Route Updates in React Native

Introduction

In Part 3 we explored how to show nearby places and draw routes. Now it’s time to go real-time — tracking a moving user (or driver) on the map and updating the route live.

We’ll use:

• react-native-maps → to display the route

• expo-location → to stream position updates

• socket.io / API polling → to broadcast position changes (optional for multi-user scenarios)

Step 1: Basic Setup

bashCopy
npx expo install react-native-maps expo-location
npm install socket.io-client

Step 2: Watch the User’s Location Continuously

bashCopy
import React, { useEffect, useState } from "react";
import { View, StyleSheet } from "react-native";
import MapView, { Marker, Polyline } from "react-native-maps";
import * as Location from "expo-location";

export default function LiveTrackingScreen() {
  const [region, setRegion] = useState<any>(null);
  const [routeCoords, setRouteCoords] = useState<any[]>([]);

  useEffect(() => {
    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") return;

      const loc = await Location.getCurrentPositionAsync({});
      const { latitude, longitude } = loc.coords;

      setRegion({
        latitude,
        longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      });

      const sub = await Location.watchPositionAsync(
        {
          accuracy: Location.Accuracy.Highest,
          timeInterval: 3000,
          distanceInterval: 5, // update every 5 m
        },
        (pos) => {
          const { latitude, longitude } = pos.coords;
          setRouteCoords((prev) => [...prev, { latitude, longitude }]);
          setRegion((r) => ({ ...r, latitude, longitude }));
        }
      );

      return () => sub.remove();
    })();
  }, []);

  if (!region) return null;

  return (
    <View style={styles.container}>
      <MapView style={styles.map} region={region}>
        {routeCoords.length > 0 && (
          <>
            <Polyline coordinates={routeCoords} strokeWidth={4} strokeColor="#007AFF" />
            <Marker coordinate={routeCoords[routeCoords.length - 1]} title="You" />
          </>
        )}
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { flex: 1 },
});

What this does:

• Requests location permission.

• Watches position every few seconds/meters.

• Draws a live polyline trail of movement.

Step 3: (Optional) Share Location in Real Time

To show another user’s movement (for example, a delivery partner), send location updates through a backend socket:

bashCopy
import io from "socket.io-client";
const socket = io("https://your-backend-url.com");

useEffect(() => {
  if (!routeCoords.length) return;
  const last = routeCoords[routeCoords.length - 1];
  socket.emit("location:update", last);
}, [routeCoords]);

On the receiver side:

bashCopy
socket.on("location:update", (coords) => {
  setDriverLocation(coords);
});

You’ll then render driverLocation as a marker that updates instantly.

Step 4: Smooth Marker Animation

For smoother UX, use react-native-maps-animated-marker or Animated API to interpolate coordinates:

bashCopy
// pseudo
Animated.timing(markerRef, {
  toValue: new AnimatedRegion({ latitude, longitude }),
  useNativeDriver: false,
}).start();

This creates a fluid moving-car effect rather than jumpy updates.

Conclusion

And that’s it — you’ve built a real-time location tracker with live route updates.

Key takeaways:

• Use watchPositionAsync for continuous tracking.

• Store coordinates to visualize movement with polylines.

• Integrate sockets for multi-user real-time sharing.

• Animate markers for smooth transitions.