Fix map preview not extended to full view

src/components/ConfirmedRoute.js

@@ -97,7 +97,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) {
                         location: lodashGet(waypointMarkers, [0, 'coordinate'], CONST.MAPBOX.DEFAULT_COORDINATE),
                     }}
                     directionCoordinates={coordinates}
-                    style={styles.mapView}
+                    style={[styles.mapView, styles.br4]}
                     waypoints={waypointMarkers}
                     styleURL={CONST.MAPBOX.STYLE_URL}
                 />

src/components/DistanceRequest/DistanceRequestFooter.js

@@ -118,15 +118,16 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
                             location: CONST.MAPBOX.DEFAULT_COORDINATE,
                         }}
                         directionCoordinates={lodashGet(transaction, 'routes.route0.geometry.coordinates', [])}
-                        style={styles.mapView}
+                        style={[styles.mapView, styles.mapEditView]}
                         waypoints={waypointMarkers}
                         styleURL={CONST.MAPBOX.STYLE_URL}
-                        overlayStyle={styles.m4}
+                        overlayStyle={styles.mapEditView}
                     />
                 ) : (
                     <PendingMapView
                         title={translate('distance.mapPending.title')}
                         subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
+                        style={styles.mapEditView}
                     />
                 )}
             </View>

src/components/DistanceRequest/index.js

@@ -276,7 +276,4 @@ export default withOnyx({
     transaction: {
         key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID || 0}`,
     },
-    mapboxAccessToken: {
-        key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
-    },
 })(DistanceRequest);

src/components/DraggableList/index.native.tsx

@@ -2,11 +2,15 @@ import React from 'react';
 import DraggableFlatList from 'react-native-draggable-flatlist';
 import {FlatList} from 'react-native-gesture-handler';
 import type {DraggableListProps} from './types';
+import styles from '../../styles/styles';
 
 function DraggableList<T>({renderClone, shouldUsePortal, ...viewProps}: DraggableListProps<T>, ref: React.ForwardedRef<FlatList<T>>) {
     return (
         <DraggableFlatList
             ref={ref}
+            containerStyle={styles.flex1}
+            contentContainerStyle={styles.flexGrow1}
+            ListFooterComponentStyle={styles.flex1}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...viewProps}
         />

src/components/DraggableList/index.tsx

@@ -73,6 +73,7 @@ function DraggableList<T>(
         <ScrollView
             ref={ref}
             style={styles.flex1}
+            contentContainerStyle={styles.flex1}
         >
             <DragDropContext onDragEnd={onDragEnd}>
                 <Droppable

src/components/MapView/MapViewTypes.ts

@@ -33,6 +33,9 @@ type PendingMapViewProps = {
 
     /** Subtitle message below the title */
     subtitle?: string;
+
+    /** Style applied to PendingMapView */
+    style?: StyleProp<ViewStyle>;
 };
 
 // Initial state of the map

src/components/MapView/PendingMapView.tsx

@@ -8,11 +8,11 @@ import {PendingMapViewProps} from './MapViewTypes';
 import BlockingView from '../BlockingViews/BlockingView';
 import * as Expensicons from '../Icon/Expensicons';
 
-function PendingMapView({title = '', subtitle = ''}: PendingMapViewProps) {
+function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps) {
     const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle);
 
     return (
-        <View style={[styles.mapPendingView]}>
+        <View style={[styles.mapPendingView, style]}>
             {hasTextContent ? (
                 <BlockingView
                     icon={Expensicons.EmptyStateRoutePending}

src/styles/styles.ts

@@ -26,6 +26,7 @@ import overflow from './utilities/overflow';
 import positioning from './utilities/positioning';
 import sizing from './utilities/sizing';
 import spacing from './utilities/spacing';
+import borders from './utilities/borders';
 import textUnderline from './utilities/textUnderline';
 import userSelect from './utilities/userSelect';
 import visibility from './utilities/visibility';
@@ -213,6 +214,7 @@ const styles = (theme: ThemeDefault) =>
     ({
         // Add all of our utility and helper styles
         ...spacing,
+        ...borders,
         ...sizing,
         ...flex,
         ...display,
@@ -833,9 +835,9 @@ const styles = (theme: ThemeDefault) =>
         cameraView: {
             flex: 1,
             overflow: 'hidden',
-            borderRadius: 28,
+            borderRadius: variables.componentBorderRadiusXLarge,
             borderStyle: 'solid',
-            borderWidth: 8,
+            borderWidth: variables.componentBorderWidth,
             backgroundColor: theme.highlightBG,
             borderColor: theme.appBG,
             display: 'flex',
@@ -3832,15 +3834,20 @@ const styles = (theme: ThemeDefault) =>
 
         mapViewContainer: {
             ...flex.flex1,
-            ...spacing.p4,
             minHeight: 300,
             maxHeight: 500,
         },
 
         mapView: {
-            flex: 1,
-            borderRadius: 16,
+            ...flex.flex1,
             overflow: 'hidden',
+            backgroundColor: theme.highlightBG,
+        },
+
+        mapEditView: {
+            borderRadius: variables.componentBorderRadiusXLarge,
+            borderWidth: variables.componentBorderWidth,
+            borderColor: theme.appBG,
         },
 
         mapViewOverlay: {

src/styles/utilities/borders.ts

@@ -0,0 +1,18 @@
+import {ViewStyle} from 'react-native';
+
+/**
+ * All styles should be incremented by units of 4.
+ */
+export default {
+    br0: {
+        borderRadius: 0,
+    },
+
+    br2: {
+        borderRadius: 8,
+    },
+
+    br4: {
+        borderRadius: 16,
+    },
+} satisfies Record<string, ViewStyle>;

src/styles/variables.ts

@@ -23,8 +23,10 @@ export default {
     componentBorderRadiusMedium: 6,
     componentBorderRadiusNormal: 8,
     componentBorderRadiusLarge: 16,
+    componentBorderRadiusXLarge: 28,
     componentBorderRadiusCard: 20,
     componentBorderRadiusRounded: 24,
+    componentBorderWidth: 8,
     appModalAppIconSize: 48,
     buttonBorderRadius: 100,
     avatarSizeLargeBordered: 88,