Display single waypoint

package.json

@@ -144,7 +144,7 @@
     "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.6",
+    "react-native-x-maps": "github:Expensify/react-native-x-maps#hayata-test-new-version",
     "react-pdf": "^6.2.2",
     "react-plaid-link": "3.3.2",
     "react-web-config": "^1.0.0",

src/components/DistanceRequest.js

@@ -74,10 +74,38 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
     const {translate} = useLocalize();
 
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
-    const waypointCoordinates = _.map(waypoints, (waypoint) => [waypoint.lat, waypoint.lng]);
     const numberOfWaypoints = _.size(waypoints);
     const lastWaypointIndex = numberOfWaypoints - 1;
 
+    const waypointsData = _.filter(
+        _.map(waypoints, (waypoint, key) => {
+            if (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
+                        height={20}
+                        fill={theme.iconReversed}
+                    />
+                ),
+            };
+        }),
+        (waypoint) => waypoint,
+    );
+
     // Show up to the max number of waypoints plus 1/2 of one to hint at scrolling
     const halfMenuItemHeight = Math.floor(variables.baseMenuItemHeight / 2);
     const scrollContainerMaxHeight = variables.baseMenuItemHeight * MAX_WAYPOINTS_TO_DISPLAY + halfMenuItemHeight;
@@ -167,6 +195,7 @@ function DistanceRequest({transactionID, transaction, mapboxAccessToken}) {
                             zoom: DEFAULT_ZOOM_LEVEL,
                         }}
                         style={styles.mapView}
+                        waypoints={waypointsData}
                     />
                 ) : (
                     <View style={[styles.mapPendingView]}>

src/styles/styles.js

@@ -3697,7 +3697,7 @@ const styles = {
         ...flex.flex1,
         borderRadius: variables.componentBorderRadiusLarge,
     },
-  
+
     userReportStatusEmoji: {
         fontSize: variables.fontSizeNormal,
         marginRight: 4,