implement DistanceMapView with blocking view for Android native

src/components/ConfirmedRoute.js

@@ -16,7 +16,7 @@ import transactionPropTypes from './transactionPropTypes';
 import BlockingView from './BlockingViews/BlockingView';
 import useNetwork from '../hooks/useNetwork';
 import useLocalize from '../hooks/useLocalize';
-import MapView from './MapView';
+import DistanceMapView from './DistanceMapView';
 
 const propTypes = {
     /** Transaction that stores the distance request data */
@@ -90,7 +90,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) {
     return (
         <>
             {!isOffline && Boolean(mapboxAccessToken.token) ? (
-                <MapView
+                <DistanceMapView
                     accessToken={mapboxAccessToken.token}
                     mapPadding={CONST.MAP_PADDING}
                     pitchEnabled={false}

src/components/DistanceMapView/distanceMapViewPropTypes.js

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    // Public access token to be used to fetch map data from Mapbox.
+    accessToken: PropTypes.string.isRequired,
+
+    // Style applied to MapView component. Note some of the View Style props are not available on ViewMap
+    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+
+    // Link to the style JSON document.
+    styleURL: PropTypes.string,
+
+    // Whether map can tilt in the vertical direction.
+    pitchEnabled: PropTypes.bool,
+
+    // Padding to apply when the map is adjusted to fit waypoints and directions
+    mapPadding: PropTypes.number,
+
+    // Initial coordinate and zoom level
+    initialState: PropTypes.shape({
+        location: PropTypes.arrayOf(PropTypes.number).isRequired,
+        zoom: PropTypes.number.isRequired,
+    }),
+
+    // Locations on which to put markers
+    waypoints: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.string,
+            coordinate: PropTypes.arrayOf(PropTypes.number),
+            markerComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+        }),
+    ),
+
+    // List of coordinates which together forms a direction.
+    directionCoordinates: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
+
+    // Callback to call when the map is idle / ready
+    onMapReady: PropTypes.func,
+
+    // Optional additional styles to be applied to the overlay
+    overlayStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+};
+
+const defaultProps = {
+    styleURL: undefined,
+    pitchEnabled: false,
+    mapPadding: 0,
+    initialState: undefined,
+    waypoints: undefined,
+    directionCoordinates: undefined,
+    onMapReady: () => {},
+    overlayStyle: undefined,
+};
+
+export {propTypes, defaultProps};

src/components/DistanceMapView/index.android.js

@@ -0,0 +1,48 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import BlockingView from '../BlockingViews/BlockingView';
+import MapView from '../MapView';
+import styles from '../../styles/styles';
+import useNetwork from '../../hooks/useNetwork';
+import useLocalize from '../../hooks/useLocalize';
+import * as Expensicons from '../Icon/Expensicons';
+import * as StyleUtils from '../../styles/StyleUtils';
+import * as distanceMapViewPropTypes from './distanceMapViewPropTypes';
+
+function DistanceMapView(props) {
+    const [isMapReady, setIsMapReady] = useState(false);
+    const {isOffline} = useNetwork();
+    const {translate} = useLocalize();
+
+    return (
+        <>
+            <MapView
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {..._.omit(props, 'overlayStyle')}
+                onMapReady={() => {
+                    if (isMapReady) {
+                        return;
+                    }
+                    setIsMapReady(true);
+                }}
+            />
+            {!isMapReady && (
+                <View style={StyleUtils.combineStyles(styles.mapViewOverlay, props.overlayStyle)}>
+                    <BlockingView
+                        icon={Expensicons.EmptyStateRoutePending}
+                        title={translate('distance.mapPending.title')}
+                        subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
+                        shouldShowLink={false}
+                    />
+                </View>
+            )}
+        </>
+    );
+}
+
+DistanceMapView.propTypes = distanceMapViewPropTypes.propTypes;
+DistanceMapView.defaultProps = distanceMapViewPropTypes.defaultProps;
+DistanceMapView.displayName = 'DistanceMapView';
+
+export default DistanceMapView;

src/components/DistanceMapView/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import _ from 'underscore';
+import MapView from '../MapView';
+import * as distanceMapViewPropTypes from './distanceMapViewPropTypes';
+
+function DistanceMapView(props) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <MapView {..._.omit(props, 'overlayStyle')} />;
+}
+
+DistanceMapView.propTypes = distanceMapViewPropTypes.propTypes;
+DistanceMapView.defaultProps = distanceMapViewPropTypes.defaultProps;
+DistanceMapView.displayName = 'DistanceMapView';
+
+export default DistanceMapView;

src/components/DistanceRequest.js

@@ -28,7 +28,7 @@ import * as Transaction from '../libs/actions/Transaction';
 import * as TransactionUtils from '../libs/TransactionUtils';
 
 import Button from './Button';
-import MapView from './MapView';
+import DistanceMapView from './DistanceMapView';
 import LinearGradient from './LinearGradient';
 import * as Expensicons from './Icon/Expensicons';
 import BlockingView from './BlockingViews/BlockingView';
@@ -238,7 +238,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
             </View>
             <View style={styles.mapViewContainer}>
                 {!isOffline && Boolean(mapboxAccessToken.token) ? (
-                    <MapView
+                    <DistanceMapView
                         accessToken={mapboxAccessToken.token}
                         mapPadding={CONST.MAPBOX.PADDING}
                         pitchEnabled={false}
@@ -250,6 +250,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                         style={styles.mapView}
                         waypoints={waypointMarkers}
                         styleURL={CONST.MAPBOX.STYLE_URL}
+                        overlayStyle={styles.m4}
                     />
                 ) : (
                     <View style={[styles.mapPendingView]}>

src/components/MapView/MapView.tsx

@@ -11,7 +11,7 @@ import CONST from '../../CONST';
 
 import {MapViewProps, MapViewHandle} from './MapViewTypes';
 
-const MapView = forwardRef<MapViewHandle, MapViewProps>(({accessToken, style, mapPadding, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates}, ref) => {
+const MapView = forwardRef<MapViewHandle, MapViewProps>(({accessToken, style, mapPadding, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady}, ref) => {
     const cameraRef = useRef<Mapbox.Camera>(null);
     const [isIdle, setIsIdle] = useState(false);
 
@@ -56,6 +56,9 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(({accessToken, style, ma
     const setMapIdle = (e: MapState) => {
         if (e.gestures.isGestureActive) return;
         setIsIdle(true);
+        if (onMapReady) {
+            onMapReady();
+        }
     };
 
     return (

src/components/MapView/MapViewTypes.ts

@@ -18,6 +18,8 @@ type MapViewProps = {
     waypoints?: WayPoint[];
     // List of coordinates which together forms a direction.
     directionCoordinates?: Array<[number, number]>;
+    // Callback to call when the map is idle / ready.
+    onMapReady: () => void;
 };
 
 type DirectionProps = {

src/styles/styles.js

@@ -3931,6 +3931,18 @@ const styles = {
         overflow: 'hidden',
     },
 
+    mapViewOverlay: {
+        flex: 1,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        borderRadius: variables.componentBorderRadiusLarge,
+        overflow: 'hidden',
+        backgroundColor: themeColors.highlightBG,
+        ...sizing.w100,
+        ...sizing.h100,
+    },
+
     confirmationListMapItem: {
         ...spacing.m5,
         height: 200,