How to Add Real-Time Location Tracking & Geofencing in React Native? (With GitHub)

In this hyper-connected world, users expect apps to know where they are and why it matters.

Whether it’s a food delivery app updating driver routes in real-time, a ride-hailing app that needs precise pickup points, or a smart alert system triggering reminders when entering or exiting a location, real-time location tracking and geofencing are must-haves for modern mobile experiences.

If you’re building a React Native app, integrating real-time GPS tracking and context-aware geofence logic can greatly enhance user engagement, automation, and value.

In this React Native geofencing tutorial, we’ll walk you through the full process, from live location updates to creating custom geofencing using simple code examples and a GitHub-ready project.

What Tools and Libraries Are Required?

Before jumping into the code, let’s quickly set up the important tools.

React Native CLI vs Expo

• React Native CLI offers full control and native module access, best for background location tracking and complex geofencing.
• Expo is easier to set up but limited in advanced location capabilities without ejecting.

For full background location features, we recommend using React Native CLI.

Required Libraries

To allow reliable tracking and geofencing in React Native, you’ll need:

• react-native-geolocation-service: For accurate and battery-efficient GPS tracking.
• react-native-background-geolocation: Powerful geofencing and background location support.
• @react-native-community/push-notification-ios or react-native-push-notification: For alerts.

Step 1: Implement Real-Time Location Tracking in React Native

Let’s start by adding real-time GPS tracking to your React Native app.

How Does GPS Work in Mobile Apps?

GPS modules in smartphones use satellite data and nearby networks to determine location coordinates.

In React Native, we use native modules to access this data for live tracking.

This is important for:

• Food delivery apps
• Taxi booking apps
• Asset tracking dashboards

iOS & Android Location Permissions

Android

You need the following permissions in AndroidManifest.xml:

      
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
        <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
        <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>
      
    

iOS

In Info.plist, add:

        
          <key>NSLocationWhenInUseUsageDescription</key>
          <string>We use your location to show your position</string>
          <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
          <string>We need background location access</string>
          <key>UIBackgroundModes</key>
          <array>
            <string>location</string>
          </array>
        
    

Real-Time Location Tracking Logic

Install dependencies:

        
          npm install react-native-geolocation-service
          npx pod-install
        
    

Enable permissions using react-native-permissions (optional, but recommended).

        
          import React, { useEffect, useState } from 'react';
          import { View, Text, PermissionsAndroid, Platform } from 'react-native';
          import Geolocation from 'react-native-geolocation-service';
          
          const LiveLocation = () => {
          const [location, setLocation] = useState(null);
          const requestLocationPermission = async () => {
            if (Platform.OS === 'android') {
              await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
              );
            }
            };
          
            useEffect(() => {
            requestLocationPermission();
            const watchId = Geolocation.watchPosition(
              position => {
                setLocation(position.coords);
              },
              error => {
                console.warn(error);
              },
              {
                enableHighAccuracy: true,
                distanceFilter: 10,
                interval: 5000,
              }
            );
          
            return () => Geolocation.clearWatch(watchId);
            }, []);
          
            return (
            
              Latitude: {location?.latitude}
              Longitude: {location?.longitude}
            
            );
          };
          
          export default LiveLocation;
        
    

Step 2: Add Geofencing Capabilities (Enter, Exit, Stay Logic)

Now let’s set up geofencing, a way to trigger events when users enter, exit, or explore specific areas.

What Is Geofencing?

Geofencing creates a virtual boundary around a real-world location. When a user’s device enters or exits this boundary, your app can trigger notifications or actions.

Popular use-cases include:

• Auto check-in for employees
• Alerting users when near a store
• Delivery ETA updates

Add Geofencing to React Native

Install:

        
          npm install @mauron85/react-native-background-geolocation
          npx pod-install
        
    

Basic Geofencing Code Example

        
          import BackgroundGeolocation from '@mauron85/react-native-background-geolocation';

          useEffect(() => {
            BackgroundGeolocation.configure({
            desiredAccuracy: BackgroundGeolocation.HIGH_ACCURACY,
            stationaryRadius: 50,
            distanceFilter: 50,
            notificationTitle: 'Tracking',
            notificationText: 'Geofence is active',
            debug: false,
            startOnBoot: true,
            stopOnTerminate: false,
            locationProvider: BackgroundGeolocation.ACTIVITY_PROVIDER,
            interval: 10000,
            fastestInterval: 5000,
            activitiesInterval: 10000,
            stopOnStillActivity: false,
            });
          
            BackgroundGeolocation.on('location', location => {
            console.log('[location] =>', location);
            });
          
            BackgroundGeolocation.on('geofence', geofence => {
            console.log('[geofence] =>', geofence);
            // Trigger notification or event
            });
          
            BackgroundGeolocation.addGeofence({
            id: 'home',
            latitude: 37.4219983,
            longitude: -122.084,
            radius: 100,
            transitionType: 3, // ENTER + EXIT
            notification: {
              title: "Geofence Triggered",
              text: "You've entered/exited the area",
            },
            });
          
            BackgroundGeolocation.start();
          
            return () => {
            BackgroundGeolocation.removeAllListeners();
            BackgroundGeolocation.stop();
            };
          }, []);
        
    

Step 3: Handle Background Location & Persistent Tracking

Location features must work even when the app is closed or in the background.

Handle Background Tracking

To allow background geolocation in React Native, ensure:

• Android uses ACCESS_BACKGROUND_LOCATION.
• iOS has UIBackgroundModes set to location.
• You keep a foreground service or notification running.

Background Hook Example

Use the same library (react-native-background-geolocation) for persistent tracking:

        
          BackgroundGeolocation.configure({
            startForeground: true,
            notificationTitle: 'Live Location Active',
            notificationText: 'Tracking in background',
            stopOnTerminate: false,
            startOnBoot: true,
          });
        
    

This ensures your app continues to receive location updates, even if minimized or killed by the OS.

Here’s the Complete GitHub Project to Add Real-Time Location Tracking & Geofencing in React Native.

Why is Seven Square a Preferred Choice for React Native Apps?

From real-time GPS tracking to smart geofence triggers, we’ve helped startups, logistics firms, healthcare providers, and enterprise teams build scalable, high-performance apps that rely on precise location data.

• React Native Expertise: We specialize in cross-platform apps using React Native, with advanced features like background location tracking, live maps, and push-based geofence alerts.
• Proven Code Architecture: Our modular, production-grade boilerplates are optimized for low battery consumption, real-time updates, and enterprise scalability.
• Full-Cycle Support: From idea to App Store launch, we guide you through design, development, testing, and deployment.

Want a Location-based App? Contact Us Now!

What Are the Smart Features You Can Add?

Once you’ve done the basics, let’s make your app smarter:

• Sync Real-Time Location to Server: Use Firebase or Socket.IO to push location updates to your backend in real time. This allows live tracking dashboards or ETA calculations.
• Visual Map Overlays: Add react-native-maps to show current position, geofenced areas, and movement history directly on the map.
• Trigger Smart Push Notifications: Send personalized alerts when users enter/exit a geofence, perfect for attendance, promotions, or safety apps.

With these improvements, you’ll turn a basic tracker into a React Native smart tracking app that delivers more value.

Build Smarter Location-Aware Apps

Adding real-time location tracking and geofencing to your app doesn’t have to be hard, especially with the right tools and code structure.

Whether you’re a developer building logistics software, an entrepreneur launching a delivery app, or a business simplifying operations, this guide helps you build smarter, location-aware experiences.