diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx index a7155082ad86..5f791112da62 100644 --- a/src/components/MapView/MapView.tsx +++ b/src/components/MapView/MapView.tsx @@ -1,5 +1,5 @@ import {View} from 'react-native'; -import {useFocusEffect} from '@react-navigation/native'; +import {useFocusEffect, useNavigation} from '@react-navigation/native'; import Mapbox, {MapState, MarkerView, setAccessToken} from '@rnmapbox/maps'; import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; import styles from '../../styles/styles'; @@ -14,6 +14,7 @@ import {MapViewProps, MapViewHandle} from './MapViewTypes'; const MapView = forwardRef(({accessToken, style, mapPadding, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady}, ref) => { const cameraRef = useRef(null); const [isIdle, setIsIdle] = useState(false); + const navigation = useNavigation(); useImperativeHandle( ref, @@ -30,6 +31,7 @@ const MapView = forwardRef(({accessToken, style, ma // When the page regains focus, the onIdled method of the map will set the actual "idled" state, // which in turn triggers the callback. useFocusEffect( + // eslint-disable-next-line rulesdir/prefer-early-return useCallback(() => { if (waypoints?.length && isIdle) { if (waypoints.length === 1) { @@ -46,12 +48,16 @@ const MapView = forwardRef(({accessToken, style, ma cameraRef.current?.fitBounds(northEast, southWest, mapPadding, 1000); } } - return () => { - setIsIdle(false); - }; }, [mapPadding, waypoints, isIdle, directionCoordinates]), ); + useEffect(() => { + const unsubscribe = navigation.addListener('blur', () => { + setIsIdle(false); + }); + return unsubscribe; + }, [navigation]); + useEffect(() => { setAccessToken(accessToken); }, [accessToken]);