Map panning fix

config/webpack/webpack.common.js

@@ -194,7 +194,7 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
         // This is also why we have to use .website.js for our own web-specific files...
         // Because desktop also relies on "web-specific" module implementations
         // This also skips packing web only dependencies to desktop and vice versa
-        extensions: ['.web.js', platform === 'web' ? '.website.js' : '.desktop.js', '.js', '.jsx', '.web.ts', platform === 'web' ? '.website.ts' : '.desktop.ts', '.ts', '.tsx'],
+        extensions: ['.web.js', platform === 'web' ? '.website.js' : '.desktop.js', '.js', '.jsx', '.web.ts', platform === 'web' ? '.website.ts' : '.desktop.ts', '.ts', '.web.tsx', '.tsx'],
         fallback: {
             'process/browser': require.resolve('process/browser'),
         },

package.json

@@ -146,7 +146,6 @@
     "react-native-web-linear-gradient": "^1.1.2",
     "react-native-web-lottie": "^1.4.4",
     "react-native-webview": "^11.17.2",
-    "react-native-x-maps": "1.0.10",
     "react-pdf": "^6.2.2",
     "react-plaid-link": "3.3.2",
     "react-web-config": "^1.0.0",

src/CONST.ts

@@ -2594,7 +2594,6 @@ const CONST = {
 
     SF_COORDINATES: [-122.4194, 37.7749],
 
-    MAPBOX_STYLE_URL: 'mapbox://styles/expensify/cllcoiqds00cs01r80kp34tmq',
     NAVIGATION: {
         TYPE: {
             FORCED_UP: 'FORCED_UP',
@@ -2611,6 +2610,13 @@ const CONST = {
         SAASTR: 'SaaStrDemoSetup',
         SBE: 'SbeDemoSetup',
     },
+
+    MAPBOX: {
+        PADDING: 50,
+        DEFAULT_ZOOM: 10,
+        DEFAULT_COORDINATE: [-122.4021, 37.7911],
+        STYLE_URL: 'mapbox://styles/expensify/cllcoiqds00cs01r80kp34tmq',
+    },
 } as const;
 
 export default CONST;

src/components/DistanceRequest.js

@@ -1,38 +1,41 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import {ScrollView, View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
-import _ from 'underscore';
 import PropTypes from 'prop-types';
-import {withOnyx} from 'react-native-onyx';
-import MapView from 'react-native-x-maps';
+import _ from 'underscore';
+
+import CONST from '../CONST';
+import ROUTES from '../ROUTES';
 import ONYXKEYS from '../ONYXKEYS';
-import * as Transaction from '../libs/actions/Transaction';
-import * as TransactionUtils from '../libs/TransactionUtils';
-import MenuItemWithTopDescription from './MenuItemWithTopDescription';
-import * as Expensicons from './Icon/Expensicons';
-import theme from '../styles/themes/default';
-import Button from './Button';
+
 import styles from '../styles/styles';
 import variables from '../styles/variables';
-import LinearGradient from './LinearGradient';
-import * as MapboxToken from '../libs/actions/MapboxToken';
-import CONST from '../CONST';
-import BlockingView from './BlockingViews/BlockingView';
+import theme from '../styles/themes/default';
+
+import transactionPropTypes from './transactionPropTypes';
+
 import useNetwork from '../hooks/useNetwork';
+import usePrevious from '../hooks/usePrevious';
 import useLocalize from '../hooks/useLocalize';
+
+import * as ErrorUtils from '../libs/ErrorUtils';
 import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import transactionPropTypes from './transactionPropTypes';
+import * as MapboxToken from '../libs/actions/MapboxToken';
+import * as Transaction from '../libs/actions/Transaction';
+import * as TransactionUtils from '../libs/TransactionUtils';
+
+import Button from './Button';
+import MapView from './MapView';
+import LinearGradient from './LinearGradient';
+import * as Expensicons from './Icon/Expensicons';
+import BlockingView from './BlockingViews/BlockingView';
 import DotIndicatorMessage from './DotIndicatorMessage';
-import * as ErrorUtils from '../libs/ErrorUtils';
-import usePrevious from '../hooks/usePrevious';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 
 const MAX_WAYPOINTS = 25;
 const MAX_WAYPOINTS_TO_DISPLAY = 4;
 
-const MAP_PADDING = 50;
-const DEFAULT_ZOOM_LEVEL = 10;
-
 const propTypes = {
     /** The transactionID of this request */
     transactionID: PropTypes.string,
@@ -62,8 +65,7 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
     const [scrollContentHeight, setScrollContentHeight] = useState(0);
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
-
-    const waypoints = lodashGet(transaction, 'comment.waypoints', {});
+    const waypoints = useMemo(() => lodashGet(transaction, 'comment.waypoints', {}), [transaction]);
     const numberOfWaypoints = _.size(waypoints);
 
     const lastWaypointIndex = numberOfWaypoints - 1;
@@ -73,34 +75,39 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
     const haveWaypointsChanged = !_.isEqual(previousWaypoints, waypoints);
     const shouldFetchRoute = haveWaypointsChanged && !isOffline && !isLoadingRoute && TransactionUtils.validateWaypoints(waypoints);
 
-    const waypointMarkers = _.filter(
-        _.map(waypoints, (waypoint, key) => {
-            if (!waypoint || waypoint.lng === undefined || waypoint.lat === undefined) {
-                return;
-            }
-
-            const index = Number(key.replace('waypoint', ''));
-            let MarkerComponent;
-            if (index === 0) {
-                MarkerComponent = Expensicons.DotIndicatorUnfilled;
-            } else if (index === lastWaypointIndex) {
-                MarkerComponent = Expensicons.Location;
-            } else {
-                MarkerComponent = Expensicons.DotIndicator;
-            }
-
-            return {
-                coordinate: [waypoint.lng, waypoint.lat],
-                markerComponent: () => (
-                    <MarkerComponent
-                        width={20}
-                        height={20}
-                        fill={theme.icon}
-                    />
-                ),
-            };
-        }),
-        (waypoint) => waypoint,
+    const waypointMarkers = useMemo(
+        () =>
+            _.filter(
+                _.map(waypoints, (waypoint, key) => {
+                    if (!waypoint || waypoint.lng === undefined || waypoint.lat === undefined) {
+                        return;
+                    }
+
+                    const index = Number(key.replace('waypoint', ''));
+                    let MarkerComponent;
+                    if (index === 0) {
+                        MarkerComponent = Expensicons.DotIndicatorUnfilled;
+                    } else if (index === lastWaypointIndex) {
+                        MarkerComponent = Expensicons.Location;
+                    } else {
+                        MarkerComponent = Expensicons.DotIndicator;
+                    }
+
+                    return {
+                        id: `${waypoint.lng},${waypoint.lat},${index}`,
+                        coordinate: [waypoint.lng, waypoint.lat],
+                        markerComponent: () => (
+                            <MarkerComponent
+                                width={20}
+                                height={20}
+                                fill={theme.icon}
+                            />
+                        ),
+                    };
+                }),
+                (waypoint) => waypoint,
+            ),
+        [waypoints, lastWaypointIndex],
     );
 
     // Show up to the max number of waypoints plus 1/2 of one to hint at scrolling
@@ -207,17 +214,16 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
                 {!isOffline && Boolean(mapboxAccessToken.token) ? (
                     <MapView
                         accessToken={mapboxAccessToken.token}
-                        mapPadding={MAP_PADDING}
+                        mapPadding={CONST.MAPBOX.PADDING}
                         pitchEnabled={false}
                         initialState={{
-                            location: CONST.SF_COORDINATES,
-                            zoom: DEFAULT_ZOOM_LEVEL,
+                            zoom: CONST.MAPBOX.DEFAULT_ZOOM,
+                            location: CONST.MAPBOX.DEFAULT_COORDINATE,
                         }}
                         directionCoordinates={lodashGet(transaction, 'routes.route0.geometry.coordinates', [])}
-                        directionStyle={styles.mapDirection}
                         style={styles.mapView}
                         waypoints={waypointMarkers}
-                        styleURL={CONST.MAPBOX_STYLE_URL}
+                        styleURL={CONST.MAPBOX.STYLE_URL}
                     />
                 ) : (
                     <View style={[styles.mapPendingView]}>

src/components/MapView/Direction.tsx

@@ -0,0 +1,30 @@
+import Mapbox from '@rnmapbox/maps';
+import {DirectionProps} from './MapViewTypes';
+import styles from '../../styles/styles';
+
+function Direction({coordinates}: DirectionProps) {
+    if (coordinates.length < 1) {
+        return null;
+    }
+
+    return (
+        <Mapbox.ShapeSource
+            id="routeSource"
+            shape={{
+                type: 'Feature',
+                properties: {},
+                geometry: {
+                    type: 'LineString',
+                    coordinates,
+                },
+            }}
+        >
+            <Mapbox.LineLayer
+                id="routeFill"
+                style={styles.mapDirection}
+            />
+        </Mapbox.ShapeSource>
+    );
+}
+
+export default Direction;

src/components/MapView/Direction.web.tsx

@@ -0,0 +1,48 @@
+// Explanation: Different Mapbox libraries are required for web and native mobile platforms.
+// This is why we have separate components for web and native to handle the specific implementations.
+// For the web version, we use the Mapbox Web library called react-map-gl, while for the native mobile version,
+// we utilize a different Mapbox library @rnmapbox/maps tailored for mobile development.
+
+import React from 'react';
+import {View} from 'react-native';
+import {Layer, Source} from 'react-map-gl';
+import {DirectionProps} from './MapViewTypes';
+
+import styles from '../../styles/styles';
+
+function Direction({coordinates}: DirectionProps) {
+    const layerLayoutStyle: Record<string, string> = styles.mapDirectionLayer.layout;
+    const layerPointStyle: Record<string, string | number> = styles.mapDirectionLayer.paint;
+
+    if (coordinates.length < 1) {
+        return null;
+    }
+    return (
+        <View>
+            {coordinates && (
+                <Source
+                    id="route"
+                    type="geojson"
+                    data={{
+                        type: 'Feature',
+                        properties: {},
+                        geometry: {
+                            type: 'LineString',
+                            coordinates,
+                        },
+                    }}
+                >
+                    <Layer
+                        id="route"
+                        type="line"
+                        source="route"
+                        paint={layerPointStyle}
+                        layout={layerLayoutStyle}
+                    />
+                </Source>
+            )}
+        </View>
+    );
+}
+
+export default Direction;