[Bug]: Location icon displaying continuously even coming out of the mapview #3873

[Swaroopa-Agribridge]

Mapbox Implementation

Mapbox

Mapbox Version

"@rnmapbox/maps": "^10.1.30",

React Native Version

"react-native": "0.74.2",

Platform

Android

@rnmapbox/maps version

10.1.30

Standalone component to reproduce

import React, {useEffect, useState,useRef} from 'react';
import {
  View,
  StyleSheet,
  PermissionsAndroid,
  Platform,
  Text,
  TouchableOpacity,
  ToastAndroid,
  Alert,
  FlatList,
  Keyboard,
  TouchableWithoutFeedback,
  BackHandler
} from 'react-native';
import MapboxGL from '@rnmapbox/maps';
import { useIsFocused, useNavigation } from '@react-navigation/native';
import Geolocation from 'react-native-geolocation-service';
import {MAPBOX_DOWNLOADS_TOKEN} from '@env';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

MapboxGL.setAccessToken("sk.....");

const LiveLocation = ({route}) => {
  const {width, height, landscape} = useAvailableDimensions();
  const [isLive, setIsLive] = useState(true);
  const [location, setLocation] = useState(
    route?.params?.propslocation || null,
  );
  const [centerlocation, setCenterLocation] = useState(
    route?.params?.propslocation || null,
  );
  const [watchId, setWatchId] = useState([]);
  const [error, setError] = useState(null);
  const [mapStyle, setMapStyle] = useState(MapboxGL.StyleURL.Satellite);
  const [zoomLevel, setZoomLevel] = useState(18); // Track zoom level
  const desired_accuracy = route?.params?.desiredAccuracy || 20;
  const [animationMode, setAnimationMode] = useState('none');
  const [currentAngle, setCurrentAngle] = useState(0);
  const [isCompassOn, setIsCompassOn] = useState(false); // Track compass state
  const [showDetails, setShowDetails] = useState(true); // Track details visibility
  const [searchText, setSearchText] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [bounds, setBounds] = useState(null);
  const [autoCenter, setAutoCenter] = useState(false);
  const [direction, setDirection] = useState(false);
  const [routeCoordinates, setRouteCoordinates] = useState(null);
  const [currentLocation, setCurrentLocation] = useState(
    route?.params?.propslocation || null,
  );
const hasStartedRef = useRef(false);

const hasStoppedRef = useRef(false);

   const isFocused = useIsFocused();
  const navigation = useNavigation();
  const [showUserLocation, setShowUserLocation] = useState(false);
  const [followLocation, setFollowLocation] = useState(false);
  let updatedZoom = null;
  let accuracyZoomLevel = 18;
  let mapBoxObject = {};

  // Stop location updates on unmount
  useEffect(() => {
    return () => {
      stopLocation();
    };
  }, []);

  // Handle Android back press
  useEffect(() => {
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
      stopLocation();
      navigation.goBack();
      return true;
    });

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

const stopLocation = () => {
  if (!hasStoppedRef.current) {
    hasStoppedRef.current = true;
    setShowUserLocation(false);
    setFollowLocation(false);
    MapboxGL.locationManager.stop();
  }
};
useEffect(() => {
  if (isFocused && !hasStartedRef.current) {
    MapboxGL.locationManager.start();
    hasStartedRef.current = true;
    setShowUserLocation(true);
    setFollowLocation(true);
  }
}, [isFocused]);



  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
       <MapboxGL.MapView style={{ flex: 1 }}>
        <MapboxGL.Camera
          zoomLevel={20}
          centerCoordinate={[78.486671,17.385044]} // Example coords
          followUserLocation={followLocation}
        />

        {showUserLocation && (
          <MapboxGL.UserLocation
            visible={true}
            androidRenderMode="normal"
          />
        )}
      </MapboxGL.MapView>
        
      </TouchableWithoutFeedback>
     
    </View>
  );
};

const styles = StyleSheet.create({
  container: {flex: 1},
  map: {flex: 1},
  button: {
    position: 'absolute',
    bottom: 20,
    right: 10,
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    borderRadius: 25,
    padding: 10,
  },
  toggleButton: {
    position: 'absolute',
    bottom: 70,
    right: 10,
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    borderRadius: 25,
    padding: 10,
  },
  detailsContainer: {
    position: 'absolute',
    top: 10,
    left: 10,
  },
  toggleButton2: {
    marginTop: 8,
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    borderRadius: 25,
    padding: 5,
  },
  locationInfo: {
    position: 'absolute',
    top: 85,
    right: 10,
    backgroundColor: 'rgba(0,0,0,0.5)',
    padding: 10,
    borderRadius: 8,
  },
  locationText: {color: '#fff', fontSize: 14},
  error: {position: 'absolute', bottom: 100, left: 10},
  errorText: {color: 'red'},
  searchContainer: {
    position: 'absolute',
    top: 10,
    left: 0,
    right: 10,
    // backgroundColor: 'rgba(0, 0, 0, 0.3)',
    borderRadius: 8,
    paddingHorizontal: 10,
    zIndex: 1000,
    justifyContent: 'center',
    alignItems: 'center',
  },
  searchResults: {
    marginTop: 5,
    backgroundColor: '#fff',
    borderRadius: 8,
  },
  resultItem: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    color: '#757575',
  },
  resultText: {
    fontSize: 16,
    color: '#757575',
  },
});

export default LiveLocation;

Observed behavior and steps to reproduce

I am stopping the location but it is not stopping and the location icon is still visible in the status bar continuously fetching

Expected behavior

When click on any back button I am going back to previous screens I want to stop the live location and the location icon should be gone

Notes / preliminary analysis

No response

Additional links and references

No response

[github-actions]

Lint failed 😭

Please fix the errors in your code example - More info.:

error: 'route' is missing in props validation (react/prop-types) at example.jsx:25:24:
  23 | MapboxGL.setAccessToken("sk.....");
  24 | 
> 25 | const LiveLocation = ({route}) => {
     |                        ^
  26 |   const {width, height, landscape} = useAvailableDimensions();
  27 |   const [isLive, setIsLive] = useState(true);
  28 |   const [location, setLocation] = useState(


error: 'useAvailableDimensions' is not defined (no-undef) at example.jsx:26:38:
  24 | 
  25 | const LiveLocation = ({route}) => {
> 26 |   const {width, height, landscape} = useAvailableDimensions();
     |                                      ^
  27 |   const [isLive, setIsLive] = useState(true);
  28 |   const [location, setLocation] = useState(
  29 |     route?.params?.propslocation || null,


error: 'route.params' is missing in props validation (react/prop-types) at example.jsx:29:12:
  27 |   const [isLive, setIsLive] = useState(true);
  28 |   const [location, setLocation] = useState(
> 29 |     route?.params?.propslocation || null,
     |            ^
  30 |   );
  31 |   const [centerlocation, setCenterLocation] = useState(
  32 |     route?.params?.propslocation || null,


error: 'route.params.propslocation' is missing in props validation (react/prop-types) at example.jsx:29:20:
  27 |   const [isLive, setIsLive] = useState(true);
  28 |   const [location, setLocation] = useState(
> 29 |     route?.params?.propslocation || null,
     |                    ^
  30 |   );
  31 |   const [centerlocation, setCenterLocation] = useState(
  32 |     route?.params?.propslocation || null,


error: 'route.params' is missing in props validation (react/prop-types) at example.jsx:32:12:
  30 |   );
  31 |   const [centerlocation, setCenterLocation] = useState(
> 32 |     route?.params?.propslocation || null,
     |            ^
  33 |   );
  34 |   const [watchId, setWatchId] = useState([]);
  35 |   const [error, setError] = useState(null);


error: 'route.params.propslocation' is missing in props validation (react/prop-types) at example.jsx:32:20:
  30 |   );
  31 |   const [centerlocation, setCenterLocation] = useState(
> 32 |     route?.params?.propslocation || null,
     |                    ^
  33 |   );
  34 |   const [watchId, setWatchId] = useState([]);
  35 |   const [error, setError] = useState(null);


error: 'route.params' is missing in props validation (react/prop-types) at example.jsx:38:35:
  36 |   const [mapStyle, setMapStyle] = useState(MapboxGL.StyleURL.Satellite);
  37 |   const [zoomLevel, setZoomLevel] = useState(18); // Track zoom level
> 38 |   const desired_accuracy = route?.params?.desiredAccuracy || 20;
     |                                   ^
  39 |   const [animationMode, setAnimationMode] = useState('none');
  40 |   const [currentAngle, setCurrentAngle] = useState(0);
  41 |   const [isCompassOn, setIsCompassOn] = useState(false); // Track compass state


error: 'route.params.desiredAccuracy' is missing in props validation (react/prop-types) at example.jsx:38:43:
  36 |   const [mapStyle, setMapStyle] = useState(MapboxGL.StyleURL.Satellite);
  37 |   const [zoomLevel, setZoomLevel] = useState(18); // Track zoom level
> 38 |   const desired_accuracy = route?.params?.desiredAccuracy || 20;
     |                                           ^
  39 |   const [animationMode, setAnimationMode] = useState('none');
  40 |   const [currentAngle, setCurrentAngle] = useState(0);
  41 |   const [isCompassOn, setIsCompassOn] = useState(false); // Track compass state


error: 'route.params' is missing in props validation (react/prop-types) at example.jsx:50:12:
  48 |   const [routeCoordinates, setRouteCoordinates] = useState(null);
  49 |   const [currentLocation, setCurrentLocation] = useState(
> 50 |     route?.params?.propslocation || null,
     |            ^
  51 |   );
  52 | const hasStartedRef = useRef(false);
  53 | 


error: 'route.params.propslocation' is missing in props validation (react/prop-types) at example.jsx:50:20:
  48 |   const [routeCoordinates, setRouteCoordinates] = useState(null);
  49 |   const [currentLocation, setCurrentLocation] = useState(
> 50 |     route?.params?.propslocation || null,
     |                    ^
  51 |   );
  52 | const hasStartedRef = useRef(false);
  53 | 


10 errors found.```