Merge pull request #29270 from ahmedGaber93/issue-28337

fix MapView.tsx cleanup when blur

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<MapViewHandle, MapViewProps>(({accessToken, style, mapPadding, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady}, ref) => {
     const cameraRef = useRef<Mapbox.Camera>(null);
     const [isIdle, setIsIdle] = useState(false);
+    const navigation = useNavigation();
 
     useImperativeHandle(
         ref,
@@ -30,6 +31,7 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(({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<MapViewHandle, MapViewProps>(({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]);