Fix Map Panning issue

src/MapView/MapView.tsx

@@ -1,37 +1,35 @@
-import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef} from 'react';
-import Mapbox, {MarkerView} from '@rnmapbox/maps';
+import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import Mapbox, {MapState, MarkerView} from '@rnmapbox/maps';
 import {View} from 'react-native';
 import {MapViewProps, MapViewHandle} from './MapViewTypes';
 import Direction from './Direction';
 import Utils from './utils';
 
 const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
-    {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, directionCoordinates, directionStyle, logoEnabled},
+    {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, directionCoordinates, directionStyle, isFocused, logoEnabled},
     ref,
 ) {
     const cameraRef = useRef<Mapbox.Camera>(null);
+    const [isIdle, setIsIdle] = useState(false);
 
-    const bounds = useMemo(() => {
-        if (!waypoints || waypoints.length === 0) {
-            return undefined;
-        }
+    useEffect(() => {
+        if (isFocused) return;
+        setIsIdle(false);
+    }, [isFocused]);
+
+    useEffect(() => {
+        if (!waypoints || !waypoints.length || !isIdle || !isFocused) return;
 
         if (waypoints.length === 1) {
-            cameraRef.current?.flyTo(waypoints[0].coordinate);
-            cameraRef.current?.zoomTo(15);
-            return undefined;
+            cameraRef.current?.setCamera({
+                zoomLevel: 15,
+                centerCoordinate: waypoints[0].coordinate,
+            });
+        } else {
+            const {southWest, northEast} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));
+            cameraRef.current?.fitBounds(northEast, southWest, mapPadding, 1000);
         }
-
-        const {southWest, northEast} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));
-        return {
-            ne: northEast,
-            sw: southWest,
-            paddingTop: mapPadding,
-            paddingRight: mapPadding,
-            paddingBottom: mapPadding,
-            paddingLeft: mapPadding,
-        };
-    }, [waypoints]);
+    }, [mapPadding, waypoints, isFocused, isIdle]);
 
     useImperativeHandle(
         ref,
@@ -41,6 +39,11 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
         [],
     );
 
+    const setMapIdle = (e: MapState) => {
+        if (e.gestures.isGestureActive) return;
+        setIsIdle(true);
+    }
+
     // Initialize Mapbox on first mount
     useEffect(() => {
         Mapbox.setAccessToken(accessToken);
@@ -52,6 +55,7 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
                 styleURL={styleURL}
                 pitchEnabled={pitchEnabled}
                 style={{flex: 1}}
+                onMapIdle={setMapIdle}
                 logoEnabled={logoEnabled}
             >
                 <Mapbox.Camera
@@ -60,7 +64,6 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
                         centerCoordinate: initialState?.location,
                         zoomLevel: initialState?.zoom,
                     }}
-                    bounds={bounds}
                 />
                 {waypoints &&
                     waypoints.map(({coordinate, markerComponent: MarkerComponent}) => (

src/MapView/MapView.web.tsx

@@ -7,7 +7,7 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 import Direction from './Direction';
 import {DEFAULT_INITIAL_STATE} from './CONST';
 
-const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
+const MapView = forwardRef<MapViewHandle, Omit<MapViewProps, "isFocused">>(function MapView(
     {accessToken, waypoints, style, mapPadding, directionCoordinates, initialState = DEFAULT_INITIAL_STATE, styleURL, directionStyle},
     ref,
 ) {

src/MapView/MapViewTypes.ts

@@ -6,6 +6,8 @@ export type MapViewProps = {
     accessToken: string;
     // Style applied to MapView component. Note some of the View Style props are not available on ViewMap
     style: StyleProp<ViewStyle>;
+    // Focus state of the screen
+    isFocused: boolean
     // Link to the style JSON document.
     styleURL?: string;
     // Whether map can tilt in the vertical direction.