DEV Community

Dainy Jose
Dainy Jose

Posted on

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

#reactnative #mobile #development

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 

npx expo install react-native-maps expo-location
npm install socket.io-client
Enter fullscreen mode Exit fullscreen mode

Step 2: Watch the User’s Location Continuously 

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 },
});
Enter fullscreen mode Exit fullscreen mode

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:

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]);
Enter fullscreen mode Exit fullscreen mode

On the receiver side:

socket.on("location:update", (coords) => {
  setDriverLocation(coords);
});
Enter fullscreen mode Exit fullscreen mode

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:

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

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.

✍️ Written by Dainy Jose — React Native Mobile Application Developer with 3+ years of experience building cross-platform mobile apps using React Native (Expo, TypeScript, Redux).
Currently expanding backend knowledge through the MERN Stack (MongoDB, Express.js, React.js, Node.js) to create more efficient, full-stack mobile experiences.

💼 Tech Stack: React Native · TypeScript · Redux · Expo · Firebase · Node.js · Express.js · MongoDB · REST API · JWT · Jest · Google Maps · Razorpay · PayU · Agile · SDLC · Git · Bitbucket · Jira

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Top comments (0)