Merge pull request #44023 from fedirjh/fix-blue-dot-location

Fix: Blue dot is not displayed over current user location
Expensify · Jun 24, 2024 · 7489847 · 7489847
2 parents d481bd1 + 8d1ae21
commit 7489847
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/src/components/AddressSearch/index.tsx b/src/components/AddressSearch/index.tsx
@@ -14,6 +14,7 @@ import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as UserLocation from '@libs/actions/UserLocation';
 import * as ApiUtils from '@libs/ApiUtils';
 import getCurrentPosition from '@libs/getCurrentPosition';
 import type {GeolocationErrorCodeType} from '@libs/getCurrentPosition/getCurrentPosition.types';
@@ -249,12 +250,17 @@ function AddressSearch(
                 setIsFetchingCurrentLocation(false);
                 setLocationErrorCode(null);
 
+                const {latitude, longitude} = successData.coords;
+
                 const location = {
-                    lat: successData.coords.latitude,
-                    lng: successData.coords.longitude,
+                    lat: latitude,
+                    lng: longitude,
                     address: CONST.YOUR_LOCATION_TEXT,
                     name: CONST.YOUR_LOCATION_TEXT,
                 };
+
+                // Update the current user location
+                UserLocation.setUserLocation({longitude, latitude});
                 onPress?.(location);
             },
             (errorData) => {

diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
@@ -25,7 +25,7 @@ import type {ComponentProps, MapViewOnyxProps} from './types';
 import utils from './utils';
 
 const MapView = forwardRef<MapViewHandle, ComponentProps>(
-    ({accessToken, style, mapPadding, userLocation: cachedUserLocation, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady, interactive = true}, ref) => {
+    ({accessToken, style, mapPadding, userLocation, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady, interactive = true}, ref) => {
         const navigation = useNavigation();
         const {isOffline} = useNetwork();
         const {translate} = useLocalize();
@@ -34,7 +34,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const cameraRef = useRef<Mapbox.Camera>(null);
         const [isIdle, setIsIdle] = useState(false);
         const initialLocation = useMemo(() => initialState && {longitude: initialState.location[0], latitude: initialState.location[1]}, [initialState]);
-        const [currentPosition, setCurrentPosition] = useState(cachedUserLocation ?? initialLocation);
+        const currentPosition = userLocation ?? initialLocation;
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
         const shouldInitializeCurrentPosition = useRef(true);
 
@@ -50,7 +50,6 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     return;
                 }
                 UserLocation.clearUserLocation();
-                setCurrentPosition(initialLocation);
             },
             [initialLocation],
         );
@@ -74,7 +73,6 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
 
                 getCurrentPosition((params) => {
                     const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
-                    setCurrentPosition(currentCoords);
                     UserLocation.setUserLocation(currentCoords);
                 }, setCurrentPositionToInitialState);
             }, [isOffline, shouldPanMapToCurrentPosition, setCurrentPositionToInitialState]),

diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
@@ -12,6 +12,7 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
+import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -39,7 +40,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
             waypoints,
             mapPadding,
             accessToken,
-            userLocation: cachedUserLocation,
+            userLocation,
             directionCoordinates,
             initialState = {location: CONST.MAPBOX.DEFAULT_COORDINATE, zoom: CONST.MAPBOX.DEFAULT_ZOOM},
             interactive = true,
@@ -55,7 +56,8 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
 
         const [mapRef, setMapRef] = useState<MapRef | null>(null);
         const initialLocation = useMemo(() => ({longitude: initialState.location[0], latitude: initialState.location[1]}), [initialState]);
-        const [currentPosition, setCurrentPosition] = useState(cachedUserLocation ?? initialLocation);
+        const currentPosition = userLocation ?? initialLocation;
+        const prevUserPosition = usePrevious(currentPosition);
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
         const [shouldResetBoundaries, setShouldResetBoundaries] = useState<boolean>(false);
         const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []);
@@ -73,7 +75,6 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     return;
                 }
                 UserLocation.clearUserLocation();
-                setCurrentPosition(initialLocation);
             },
             [initialLocation],
         );
@@ -97,7 +98,6 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
 
                 getCurrentPosition((params) => {
                     const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
-                    setCurrentPosition(currentCoords);
                     UserLocation.setUserLocation(currentCoords);
                 }, setCurrentPositionToInitialState);
             }, [isOffline, shouldPanMapToCurrentPosition, setCurrentPositionToInitialState]),
@@ -112,11 +112,15 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                 return;
             }
 
+            // Avoid animating the naviagtion to the same location
+            const shouldAnimate = prevUserPosition.longitude !== currentPosition.longitude || prevUserPosition.latitude !== currentPosition.latitude;
+
             mapRef.flyTo({
                 center: [currentPosition.longitude, currentPosition.latitude],
                 zoom: CONST.MAPBOX.DEFAULT_ZOOM,
+                animate: shouldAnimate,
             });
-        }, [currentPosition, userInteractedWithMap, mapRef, shouldPanMapToCurrentPosition]);
+        }, [currentPosition, mapRef, prevUserPosition, shouldPanMapToCurrentPosition]);
 
         const resetBoundaries = useCallback(() => {
             if (!waypoints || waypoints.length === 0) {