UserLocation component does not emit continuous updates via onUpdate while navigating

[dilaksh06]

I value your hard work on this open street map and the (mapliber) packaes, we are always thank full to open-source devs
I’m using the UserLocation component from @maplibre/maplibre-react-native to track the user’s live location while navigating.

However, the onUpdate callback seems to fire only once when the component is mounted. It does not continuously emit updated coordinates as the user moves.
Currently I am working on a mobile app development for patrol system where we need to send the officer location for every 3 seconds, I am trying to use useLocaion component for that, but it trigger only while mounting time, so we are using react natvie community geo location package in addtion to get officer current coordiante. Please can you help me to solve this issue? Is it possible to get the user's continuously changing coordinates with the help of this maplib only, so we can eliminate other packages and reduce the load and complexity of the code? Please be kind enough to give a response on this issue, it's our major project. I am thankful to open-source devs always.

`import MapLibreRN, {
Camera, LineLayer, MapView, PointAnnotation, ShapeSource, UserLocation, UserTrackingMode,
type Location
} from '@maplibre/maplibre-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Geolocation from '@react-native-community/geolocation';
import React, { useEffect, useRef, useState } from 'react';
import { ActivityIndicator, Alert, Animated, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import CompassHeading from 'react-native-compass-heading';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import useMapHotspotData from '../../../api/partolDutyApi';
import {
closeWebSocket,
connectWebSocket,
sendEndPatrolMessage,
sendLocationViaWebSocket
} from '../../../api/webSocketService';
import { usePatrolRouteStore } from '../../../stores/po/PatrolRouteStore'; // adjust path as needed
import { Permission } from '../../../utils/Permission';
// api key
const apikey = ''; // key is removed

const styleUrl = https://api.maptiler.com/maps/streets/style.json?key=${apikey};

// --- GeoJSON Type Definition ---
type GeoJSONFeature = {
type: "Feature";
geometry: {
type: "LineString";
coordinates: number[][];
},
properties: {};
};

// --- Permission Request Function (no changes needed) ---
const handlePermisson = async () => {
const { locationGranted } = await Permission();
if (locationGranted) {
return true;
} else {
return true;
}
};

interface MapContainerProps {
showRoute: boolean;
isNavigating: boolean;
setIsNavigating: (value: boolean) => void;
setShowRoute: (value: boolean) => void;
onNearHotspotChange: (isNear: boolean) => void;
}
const policeStaton = [76.31699739701845, 10.047201561214242];

const MapContainer: React.FC = ({ showRoute, isNavigating, setIsNavigating, setShowRoute, onNearHotspotChange }) => {

const [locationGranted, setLocationGranted] = useState(false);
const [isPermissionLoading, setIsPermissionLoading] = useState(true);
const cameraRef = useRef<MapLibreRN.CameraRef>(null); // to control map camera
const [routeGeoJSON, setRouteGeoJSON] = useState<GeoJSONFeature | null>(null);
const { hotspotMarkersData, cameraBounds, loading, hotspotCoords, navigationPathCoordinates } = useMapHotspotData();
const [storageKey] = useState('userCurrentLocations'); // Key for AsyncStorage
const [currentLocation, setCurrentLocation] = useState<{ latitude: number; longitude: number } | null>(null);
const latestCoordsRef = useRef<[number, number] | null>(null);

const status = usePatrolRouteStore(state => state.status);
const rotateAnim = useRef(new Animated.Value(0)).current;
const [heading, setHeading] = useState(0);
const [Focus, setFocus] = useState(false);
const [mapLibcurrentLocation, setmapLibsetCurrentLocation] = useState<Location>();;

const BOUND_DELTA = 0.01; // about 1 km

const bounds = currentLocation
    ? {
        sw: [currentLocation.longitude - BOUND_DELTA, currentLocation.latitude - BOUND_DELTA],
        ne: [currentLocation.longitude + BOUND_DELTA, currentLocation.latitude + BOUND_DELTA],
    }
    : undefined;


const fullRouteGeoJSON = React.useMemo((): GeoJSONFeature => ({
    type: "Feature",
    geometry: {
        type: "LineString",
        coordinates: navigationPathCoordinates, // Use the navigation path
    },
    properties: {},
}), [navigationPathCoordinates]);

const handleRecenter = () => {
    // setFocus(true);
};

//handle permissions
useEffect(() => {
    const checkPermissions = async () => {
        setIsPermissionLoading(true);
        const granted = await handlePermisson();
        setLocationGranted(granted);
        setIsPermissionLoading(false);
    };

    checkPermissions();
}, []);


useEffect(() => {
    const degree_update_rate = 3;

    CompassHeading.start(degree_update_rate, ({ heading }: { heading: number }) => {
        Animated.timing(rotateAnim, {
            toValue: heading,
            duration: 300,
            useNativeDriver: true,
        }).start();

        setHeading(heading);
        // console.log("🧭 Compass heading:", heading);

    });

    return () => CompassHeading.stop();
}, []);


// initial locatin access for emegncy and safety
useEffect(() => {
    const testLocation = async () => {
        const hasPermission = await handlePermisson();
        if (!hasPermission) {
            Alert.alert('Permission Denied', 'Location permission is required.');
            return;
        }

        Geolocation.getCurrentPosition(
            position => {
                console.log('📍 Got current position:', position);
                const { latitude, longitude } = position.coords;
                const coordinate: [number, number] = [longitude, latitude];
                latestCoordsRef.current = coordinate;
                setCurrentLocation({ latitude, longitude });
                console.log('📌 Current coordinates:', coordinate);
                if (isNavigating) {
                    AsyncStorage.setItem(storageKey, JSON.stringify(coordinate))
                        .then(() => console.log('Stored location:', latestCoordsRef.current))
                        .catch(err => console.error('Storage error:', err));

                }
            },
            error => {
                console.log('❌ getCurrentPosition error:', error.code, error.message);
            },
            {
                enableHighAccuracy: false, // try true if false doesn't work
                timeout: 10000,
                maximumAge: 1000,
            }
        );
    };

    testLocation();
}, [isNavigating, latestCoordsRef]);




// keep watching user locaiton and set user current location in asyncstorage
// 🛰️ First Effect: Watch and update location
useEffect(() => {
    let watchId: number;

    const startTracking = async () => {
        const hasPermission = await handlePermisson();
        if (!hasPermission) {
            Alert.alert('Permission Denied', 'Location permission is required.');
            return;
        }

        watchId = Geolocation.watchPosition(
            position => {
                const { latitude, longitude } = position.coords;
                const coordinate: [number, number] = [longitude, latitude];
                latestCoordsRef.current = coordinate;
                setCurrentLocation({ latitude, longitude });
            },
            error => {
                console.log('Location error:', error.message);
            },
            {
                enableHighAccuracy: true,
                distanceFilter: 10,
                interval: 5000,
                fastestInterval: 2000,
            }
        );
    };

    startTracking();

    return () => {
        if (watchId !== null) Geolocation.clearWatch(watchId);
    };
}, []); // Only run once

// 💾 Second Effect: Store location every 10s if navigating
useEffect(() => {
    console.log('isNavigating', isNavigating);
    const storageInterval = setInterval(() => {
        if (latestCoordsRef.current && isNavigating) {
            AsyncStorage.setItem(storageKey, JSON.stringify(latestCoordsRef.current))
                .then(() => console.log('Stored location:', latestCoordsRef.current))
                .catch(err => console.error('Storage error:', err));
        }
    }, 10000); // 10 seconds

    return () => clearInterval(storageInterval);
}, [isNavigating]); // Only rerun if navigating state changes



// This will send co-ordinates to the server every 3 seconds if isNavigating is true
useEffect(() => {
    if (!isNavigating) return;

    const interval = setInterval(() => {
        if (currentLocation) {
            const { latitude, longitude } = currentLocation;
            sendLocationViaWebSocket(latitude, longitude);
            // Alert.alert('Location sent', `Latitude: ${latitude}, Longitude: ${longitude}`);
        }
    }, 3000); // every 3 seconds

    return () => clearInterval(interval); // cleanup when isNavigating becomes false or component unmounts
}, [isNavigating, currentLocation]); // ✅ Include currentLocation here





//keep watching the status of the socket and repsonse if it is auto discnnect
useEffect(() => {
    if (isNavigating) {
        // ✅ Patrol started — connect WebSocket
        connectWebSocket();
    } else {
        // ❌ Patrol ended — send final location + close connection
        if (currentLocation) {
            const { latitude, longitude } = currentLocation;
            sendEndPatrolMessage(latitude, longitude); // ✅ Send final message
        }

        closeWebSocket(); // 🔌 Close WebSocket
    }
}, [isNavigating]);


// show route button to show rou
useEffect(() => {
    if (!isNavigating) {
        // Only update based on showRoute if *not* navigating
        setRouteGeoJSON(showRoute ? fullRouteGeoJSON : null);
    } else {
        // When navigating, show only the remaining route
        setRouteGeoJSON(fullRouteGeoJSON);
    }
}, [showRoute, isNavigating, fullRouteGeoJSON]);


if (isPermissionLoading) {
    return (
        <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color="#1E90FF" />
            <Text style={styles.loadingText}>
                {isPermissionLoading ? "Checking permissions..." : "Getting your location..."}
            </Text>
        </View>
    );
}

if (loading && cameraBounds !== null && locationGranted) {
    return (
        <View style={styles.centerStatus}>
            <Text style={styles.errorText}>Getting hotspot details and fetching current location</Text>
        </View>
    );


}

if (status === 'pending') {
    return (
        <View style={styles.centerStatus}>
            <Text style={styles.errorText}>Patrol duty is pending!</Text>
        </View>
    );
} else if (status === null || status === undefined) {
    return (
        <View style={styles.centerStatus}>
            <Text style={styles.errorText}>patrol duty is not assigned!</Text>
        </View>
    );
}

return (
    <SafeAreaView style={styles.container}>
        <MapView
            // ref={mapViewRef} // Assign ref
            style={styles.map}
            mapStyle={styleUrl}
        >


            {true && (
                <Camera
                    // centerCoordinate={[currentLocation.longitude, currentLocation.latitude]}
                    pitch={isNavigating ? 85 : 20}
                    zoomLevel={isNavigating ? 14 : 14}
                    followUserLocation={true}
                    animationDuration={isNavigating ? 6000 : 1000}
                    followUserMode={UserTrackingMode.FollowWithCourse}
                    animationMode="easeTo"
                    followPitch={isNavigating ? 85 : 20}
                    followHeading={0}
                    followZoomLevel={17}
                    bounds={isNavigating ? bounds : undefined}
                    padding={isNavigating ? { paddingTop: 100, paddingBottom: 40, paddingLeft: 20, paddingRight: 20 } : undefined}

                // heading={heading}
                />
            )}

            <UserLocation
                visible={true}
                showsUserHeadingIndicator={true}
                renderMode={'native'}
                androidRenderMode={'gps'}

                minDisplacement={1}
                androidPreferredFramesPerSecond={30}
                onUpdate={(newLocation) => {
                    setmapLibsetCurrentLocation(newLocation)
                }}
            />



            {/* police station */}
            <PointAnnotation
                id="police-station"
                coordinate={policeStaton}
            >
                <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                    <MaterialCommunityIcons
                        name="shield-account"
                        size={30}
                        color="red"

                    />
                </View>
            </PointAnnotation>


            {routeGeoJSON && (
                <ShapeSource id="routeSource" shape={routeGeoJSON}>
                    <LineLayer
                        id="routeLine"
                        style={{ lineColor: '#007AFF', lineWidth: 5, lineJoin: 'round', lineCap: 'round' }}
                    />
                </ShapeSource>
            )}

            {hotspotMarkersData}

        </MapView>
        {currentLocation && mapLibcurrentLocation && (
            <View style={styles.locationContainer}>
                <Text style={styles.coordText}>
                    Lat: {currentLocation.latitude.toFixed(6)}
                </Text>
                <Text style={styles.coordText}>
                    Lng: {currentLocation.longitude.toFixed(6)}
                </Text>

                <Text style={styles.coordText}>
                    Lat: {mapLibcurrentLocation.coords.latitude}
                </Text>
                <Text style={styles.coordText}>
                    Lng: {mapLibcurrentLocation.coords.longitude}
                </Text>
            </View>

        )}
        {currentLocation && (
            <View style={styles.recenterButtonContainer}>
                <TouchableOpacity onPress={() => handleRecenter()} style={styles.recenterButton}>
                    <MaterialCommunityIcons name="crosshairs-gps" size={24} color="#fff" />
                </TouchableOpacity>
            </View>
        )}
    </SafeAreaView>
);

};

`