fix: Android - Map pending text shown in preview instead of icon

src/components/ConfirmedRoute.tsx

@@ -118,6 +118,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHa
             style={[styles.mapView, shouldHaveBorderRadius && styles.br4]}
             waypoints={waypointMarkers}
             styleURL={CONST.MAPBOX.STYLE_URL}
+            requireRouteToDisplayMap={requireRouteToDisplayMap}
         />
     ) : (
         <PendingMapView

src/components/DistanceMapView/index.android.tsx

@@ -3,18 +3,21 @@ import {View} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MapView from '@components/MapView';
+import PendingMapView from '@components/MapView/PendingMapView';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type DistanceMapViewProps from './types';
 
-function DistanceMapView({overlayStyle, ...rest}: DistanceMapViewProps) {
+function DistanceMapView({overlayStyle, requireRouteToDisplayMap, ...rest}: DistanceMapViewProps) {
     const styles = useThemeStyles();
     const [isMapReady, setIsMapReady] = useState(false);
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const theme = useTheme();
+    const StyleUtils = useStyleUtils();
 
     return (
         <>
@@ -29,14 +32,22 @@ function DistanceMapView({overlayStyle, ...rest}: DistanceMapViewProps) {
                 }}
             />
             {!isMapReady && (
-                <View style={[styles.mapViewOverlay, overlayStyle]}>
-                    <BlockingView
-                        icon={Expensicons.EmptyStateRoutePending}
-                        title={translate('distance.mapPending.title')}
-                        subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
-                        shouldShowLink={false}
-                        iconColor={theme.border}
-                    />
+                <View style={[styles.mapViewOverlay, overlayStyle, requireRouteToDisplayMap && StyleUtils.getBorderRadiusStyle(0)]}>
+                    {/* The "map pending" text should only be shown in the IOU create flow. In the created IOU preview, only the icon should be shown. */}
+                    {!requireRouteToDisplayMap ? (
+                        <BlockingView
+                            icon={Expensicons.EmptyStateRoutePending}
+                            title={translate('distance.mapPending.title')}
+                            subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
+                            shouldShowLink={false}
+                            iconColor={theme.border}
+                        />
+                    ) : (
+                        <PendingMapView
+                            isSmallerIcon
+                            style={StyleUtils.getBorderRadiusStyle(0)}
+                        />
+                    )}
                 </View>
             )}
         </>

src/components/DistanceMapView/types.ts

@@ -3,6 +3,10 @@ import type {MapViewProps} from '@components/MapView/MapViewTypes';
 
 type DistanceMapViewProps = MapViewProps & {
     overlayStyle?: StyleProp<ViewStyle>;
+
+    /** Whether it should display the Mapbox map only when the route/coordinates exist otherwise
+     * it will display pending map icon */
+    requireRouteToDisplayMap?: boolean;
 };
 
 export default DistanceMapViewProps;