diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx index 5174db6fd32f..2e304bb0214b 100644 --- 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( const cameraRef = useRef(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( 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 index e75d47305d90..f59463442ac8 100644 --- 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( const StyleUtils = useStyleUtils(); const [mapRef, setMapRef] = useState(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(false); const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []); @@ -66,13 +67,13 @@ const MapView = forwardRef( 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(