Map panning fix (2)

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

@@ -2604,7 +2604,6 @@ const CONST = {
 
     SF_COORDINATES: [-122.4194, 37.7749],
 
-    MAPBOX_STYLE_URL: 'mapbox://styles/expensify/cllcoiqds00cs01r80kp34tmq',
     NAVIGATION: {
         TYPE: {
             FORCED_UP: 'FORCED_UP',
@@ -2623,6 +2622,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/ConfirmedRoute.js

@@ -1,7 +1,7 @@
 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import MapView from 'react-native-x-maps';
+
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import _ from 'underscore';
@@ -15,18 +15,27 @@ import transactionPropTypes from './transactionPropTypes';
 import BlockingView from './BlockingViews/BlockingView';
 import useNetwork from '../hooks/useNetwork';
 import useLocalize from '../hooks/useLocalize';
+import MapView from './MapView';
 
 const propTypes = {
     /** Transaction that stores the distance request data */
     transaction: transactionPropTypes,
 
-    /** Token needed to render the map */
-    mapboxToken: PropTypes.string,
+    /** Data about Mapbox token for calling Mapbox API */
+    mapboxAccessToken: PropTypes.shape({
+        /** Temporary token for Mapbox API */
+        token: PropTypes.string,
+
+        /** Time when the token will expire in ISO 8601 */
+        expiration: PropTypes.string,
+    }),
 };
 
 const defaultProps = {
     transaction: {},
-    mapboxToken: '',
+    mapboxAccessToken: {
+        token: '',
+    },
 };
 
 const getWaypointMarkers = (waypoints) => {
@@ -49,6 +58,7 @@ const getWaypointMarkers = (waypoints) => {
             }
 
             return {
+                id: `${waypoint.lng},${waypoint.lat},${index}`,
                 coordinate: [waypoint.lng, waypoint.lat],
                 markerComponent: () => (
                     <MarkerComponent
@@ -63,7 +73,7 @@ const getWaypointMarkers = (waypoints) => {
     );
 };
 
-function ConfirmedRoute({mapboxToken, transaction}) {
+function ConfirmedRoute({mapboxAccessToken, transaction}) {
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const {route0: route} = transaction.routes || {};
@@ -78,16 +88,15 @@ function ConfirmedRoute({mapboxToken, transaction}) {
 
     return (
         <>
-            {!isOffline && mapboxToken ? (
+            {!isOffline && Boolean(mapboxAccessToken.token) ? (
                 <MapView
-                    accessToken={mapboxToken}
+                    accessToken={mapboxAccessToken.token}
                     mapPadding={CONST.MAP_PADDING}
                     pitchEnabled={false}
                     directionCoordinates={coordinates}
-                    directionStyle={styles.mapDirection}
                     style={styles.mapView}
                     waypoints={waypointMarkers}
-                    styleURL={CONST.MAPBOX_STYLE_URL}
+                    styleURL={CONST.MAPBOX.STYLE_URL}
                 />
             ) : (
                 <View style={[styles.mapPendingView]}>
@@ -107,9 +116,8 @@ export default withOnyx({
     transaction: {
         key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
     },
-    mapboxToken: {
+    mapboxAccessToken: {
         key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
-        selector: (mapboxAccessToken) => mapboxAccessToken && mapboxAccessToken.token,
     },
 })(ConfirmedRoute);
 

src/components/DistanceRequest.js

@@ -1,41 +1,45 @@
-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 lodashHas from 'lodash/has';
-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 * as IOU from '../libs/actions/IOU';
-import reportPropTypes from '../pages/reportPropTypes';
-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';
 import {iouPropTypes} from '../pages/iou/propTypes';
+import reportPropTypes from '../pages/reportPropTypes';
+import * as IOU from '../libs/actions/IOU';
 
 const MAX_WAYPOINTS = 25;
 const MAX_WAYPOINTS_TO_DISPLAY = 4;
 
-const DEFAULT_ZOOM_LEVEL = 10;
-
 const propTypes = {
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
     iou: iouPropTypes,
@@ -64,7 +68,9 @@ const defaultProps = {
     iouType: '',
     report: {},
     transaction: {},
-    mapboxAccessToken: {},
+    mapboxAccessToken: {
+        token: '',
+    },
 };
 
 function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken}) {
@@ -75,7 +81,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
     const {translate} = useLocalize();
 
     const reportID = lodashGet(report, 'reportID', '');
-    const waypoints = lodashGet(transaction, 'comment.waypoints', {});
+    const waypoints = useMemo(() => lodashGet(transaction, 'comment.waypoints', {}), [transaction]);
     const numberOfWaypoints = _.size(waypoints);
 
     const lastWaypointIndex = numberOfWaypoints - 1;
@@ -86,34 +92,39 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
     const doesRouteExist = lodashHas(transaction, 'routes.route0.geometry.coordinates');
     const shouldFetchRoute = (!doesRouteExist || haveWaypointsChanged) && !isLoadingRoute && TransactionUtils.validateWaypoints(waypoints);
 
-    const waypointMarkers = _.filter(
-        _.map(waypoints, (waypoint, key) => {
-            if (!waypoint || !lodashHas(waypoint, 'lat') || !lodashHas(waypoint, 'lng')) {
-                return;
-            }
+    const waypointMarkers = useMemo(
+        () =>
+            _.filter(
+                _.map(waypoints, (waypoint, key) => {
+                    if (!waypoint || !lodashHas(waypoint, 'lat') || !lodashHas(waypoint, 'lng')) {
+                        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;
-            }
+                    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={CONST.MAP_MARKER_SIZE}
-                        height={CONST.MAP_MARKER_SIZE}
-                        fill={theme.icon}
-                    />
-                ),
-            };
-        }),
-        (waypoint) => waypoint,
+                    return {
+                        id: `${waypoint.lng},${waypoint.lat},${index}`,
+                        coordinate: [waypoint.lng, waypoint.lat],
+                        markerComponent: () => (
+                            <MarkerComponent
+                                width={CONST.MAP_MARKER_SIZE}
+                                height={CONST.MAP_MARKER_SIZE}
+                                fill={theme.icon}
+                            />
+                        ),
+                    };
+                }),
+                (waypoint) => waypoint,
+            ),
+        [waypoints, lastWaypointIndex],
     );
 
     // Show up to the max number of waypoints plus 1/2 of one to hint at scrolling
@@ -218,17 +229,16 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                 {!isOffline && Boolean(mapboxAccessToken.token) ? (
                     <MapView
                         accessToken={mapboxAccessToken.token}
-                        mapPadding={CONST.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;