Merge pull request #40852 from bernhardoj/fix/40318-prevent-moving-map-when-shown-in-report-preview

Fix map can be moved in money request preview

Author: stitesExpensify

src/components/ConfirmedRoute.tsx

@@ -26,9 +26,12 @@ type ConfirmedRoutePropsOnyxProps = {
 type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & {
     /** Transaction that stores the distance expense data */
     transaction: OnyxEntry<Transaction>;
+
+    /** Whether the map is interactable or not */
+    interactive?: boolean;
 };
 
-function ConfirmedRoute({mapboxAccessToken, transaction}: ConfirmedRouteProps) {
+function ConfirmedRoute({mapboxAccessToken, transaction, interactive}: ConfirmedRouteProps) {
     const {isOffline} = useNetwork();
     const {route0: route} = transaction?.routes ?? {};
     const waypoints = transaction?.comment?.waypoints ?? {};
@@ -89,6 +92,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction}: ConfirmedRouteProps) {
 
     return !isOffline && Boolean(mapboxAccessToken?.token) ? (
         <DistanceMapView
+            interactive={interactive}
             accessToken={mapboxAccessToken?.token ?? ''}
             mapPadding={CONST.MAP_PADDING}
             pitchEnabled={false}

src/components/MapView/MapView.tsx

@@ -20,7 +20,7 @@ import type {ComponentProps, MapViewOnyxProps} from './types';
 import utils from './utils';
 
 const MapView = forwardRef<MapViewHandle, ComponentProps>(
-    ({accessToken, style, mapPadding, userLocation: cachedUserLocation, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady}, ref) => {
+    ({accessToken, style, mapPadding, userLocation: cachedUserLocation, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady, interactive = true}, ref) => {
         const navigation = useNavigation();
         const {isOffline} = useNetwork();
         const {translate} = useLocalize();
@@ -145,7 +145,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         };
 
         return !isOffline && Boolean(accessToken) && Boolean(currentPosition) ? (
-            <View style={style}>
+            <View style={[style, !interactive ? styles.pointerEventsNone : {}]}>
                 <Mapbox.MapView
                     style={{flex: 1}}
                     styleURL={styleURL}

src/components/MapView/MapView.website.tsx

@@ -38,6 +38,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
             userLocation: cachedUserLocation,
             directionCoordinates,
             initialState = {location: CONST.MAPBOX.DEFAULT_COORDINATE, zoom: CONST.MAPBOX.DEFAULT_ZOOM},
+            interactive = true,
         },
         ref,
     ) => {
@@ -195,6 +196,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     }}
                     style={StyleUtils.getTextColorStyle(theme.mapAttributionText)}
                     mapStyle={styleURL}
+                    interactive={interactive}
                 >
                     {waypoints?.map(({coordinate, markerComponent, id}) => {
                         const MarkerComponent = markerComponent;

src/components/MapView/MapViewTypes.ts

@@ -20,6 +20,8 @@ type MapViewProps = {
     directionCoordinates?: Array<[number, number]>;
     // Callback to call when the map is idle / ready.
     onMapReady?: () => void;
+    // Whether the map is interactable or not
+    interactive?: boolean;
 };
 
 type DirectionProps = {

src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

@@ -234,7 +234,10 @@ function MoneyRequestPreviewContent({
                 >
                     {showMapAsImage && (
                         <View style={styles.reportActionItemImages}>
-                            <ConfirmedRoute transaction={transaction} />
+                            <ConfirmedRoute
+                                transaction={transaction}
+                                interactive={false}
+                            />
                         </View>
                     )}
                     {!showMapAsImage && hasReceipt && (

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -358,7 +358,10 @@ function MoneyRequestView({
                     >
                         <View style={styles.moneyRequestViewImage}>
                             {showMapAsImage ? (
-                                <ConfirmedRoute transaction={transaction} />
+                                <ConfirmedRoute
+                                    transaction={transaction}
+                                    interactive={false}
+                                />
                             ) : (
                                 <ReportActionItemImage
                                     thumbnail={receiptURIs?.thumbnail}