Merge pull request #42773 from tienifr/fix/42752

fix: pending map in IOU confirmation step (cherry picked from commit d6faf52)
Expensify · May 30, 2024 · 9bc5953 · 9bc5953
1 parent 66c4f53
commit 9bc5953
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
@@ -1,7 +1,7 @@
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import type {MapState} from '@rnmapbox/maps';
 import Mapbox, {MarkerView, setAccessToken} from '@rnmapbox/maps';
-import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -30,7 +30,8 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
 
         const cameraRef = useRef<Mapbox.Camera>(null);
         const [isIdle, setIsIdle] = useState(false);
-        const [currentPosition, setCurrentPosition] = useState(cachedUserLocation);
+        const initialLocation = useMemo(() => initialState && {longitude: initialState.location[0], latitude: initialState.location[1]}, [initialState]);
+        const [currentPosition, setCurrentPosition] = useState(cachedUserLocation ?? initialLocation);
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
         const shouldInitializeCurrentPosition = useRef(true);
 
@@ -42,13 +43,13 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
 
         const setCurrentPositionToInitialState: GeolocationErrorCallback = useCallback(
             (error) => {
-                if (error?.code !== GeolocationErrorCode.PERMISSION_DENIED || !initialState) {
+                if (error?.code !== GeolocationErrorCode.PERMISSION_DENIED || !initialLocation) {
                     return;
                 }
                 UserLocation.clearUserLocation();
-                setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
+                setCurrentPosition(initialLocation);
             },
-            [initialState],
+            [initialLocation],
         );
 
         useFocusEffect(

diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
@@ -5,7 +5,7 @@
 import {useFocusEffect} from '@react-navigation/native';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {MapRef} from 'react-map-gl';
 import Map, {Marker} from 'react-map-gl';
 import {View} from 'react-native';
@@ -52,7 +52,8 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const StyleUtils = useStyleUtils();
 
         const [mapRef, setMapRef] = useState<MapRef | null>(null);
-        const [currentPosition, setCurrentPosition] = useState(cachedUserLocation);
+        const initialLocation = useMemo(() => ({longitude: initialState.location[0], latitude: initialState.location[1]}), [initialState]);
+        const [currentPosition, setCurrentPosition] = useState(cachedUserLocation ?? initialLocation);
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
         const [shouldResetBoundaries, setShouldResetBoundaries] = useState<boolean>(false);
         const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []);
@@ -66,13 +67,13 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
 
         const setCurrentPositionToInitialState: GeolocationErrorCallback = useCallback(
             (error) => {
-                if (error?.code !== GeolocationErrorCode.PERMISSION_DENIED || !initialState) {
+                if (error?.code !== GeolocationErrorCode.PERMISSION_DENIED || !initialLocation) {
                     return;
                 }
                 UserLocation.clearUserLocation();
-                setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
+                setCurrentPosition(initialLocation);
             },
-            [initialState],
+            [initialLocation],
         );
 
         useFocusEffect(