From 95c9b7e9750160a1b48e13cda9d4842febd135d2 Mon Sep 17 00:00:00 2001 From: Pavlo Tsimura Date: Thu, 9 Nov 2023 20:14:56 +0100 Subject: [PATCH 1/2] Reset map boundaries on resize --- src/components/MapView/MapView.web.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx index d706168f076f..8442202b5ca8 100644 --- a/src/components/MapView/MapView.web.tsx +++ b/src/components/MapView/MapView.web.tsx @@ -19,9 +19,10 @@ import utils from './utils'; const MapView = forwardRef( ({style, styleURL, waypoints, mapPadding, accessToken, directionCoordinates, initialState = {location: CONST.MAPBOX.DEFAULT_COORDINATE, zoom: CONST.MAPBOX.DEFAULT_ZOOM}}, ref) => { const [mapRef, setMapRef] = useState(null); + const [shouldResetBoundaries, setShouldResetBoundaries] = useState(false); const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []); - useEffect(() => { + const resetBoundaries = useCallback(() => { if (!waypoints || waypoints.length === 0) { return; } @@ -47,6 +48,19 @@ const MapView = forwardRef( map.fitBounds([northEast, southWest], {padding: mapPadding}); }, [waypoints, mapRef, mapPadding, directionCoordinates]); + // Reset boundaries when waypoints change + useEffect(resetBoundaries, [resetBoundaries]); + + useEffect(() => { + if (!shouldResetBoundaries) { + return; + } + + resetBoundaries(); + setShouldResetBoundaries(false); + // eslint-disable-next-line react-hooks/exhaustive-deps -- this effect only needs to run when the boundaries reset is forced + }, [shouldResetBoundaries]); + useEffect(() => { if (!mapRef) { return; @@ -54,6 +68,7 @@ const MapView = forwardRef( const resizeObserver = new ResizeObserver(() => { mapRef.resize(); + setShouldResetBoundaries(true); }); resizeObserver.observe(mapRef.getContainer()); From 68233f4b7b7e2fae3f8031c0e3727e5f7c63ae94 Mon Sep 17 00:00:00 2001 From: Pavlo Tsimura Date: Wed, 15 Nov 2023 10:27:39 +0100 Subject: [PATCH 2/2] Remove a redundant comment Co-authored-by: Santhosh Sellavel <85645967+Santhosh-Sellavel@users.noreply.github.com> --- src/components/MapView/MapView.web.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx index 8442202b5ca8..110d24f0c087 100644 --- a/src/components/MapView/MapView.web.tsx +++ b/src/components/MapView/MapView.web.tsx @@ -48,7 +48,6 @@ const MapView = forwardRef( map.fitBounds([northEast, southWest], {padding: mapPadding}); }, [waypoints, mapRef, mapPadding, directionCoordinates]); - // Reset boundaries when waypoints change useEffect(resetBoundaries, [resetBoundaries]); useEffect(() => {