Only set belowLayerID for routes in interactive mode

Author: GCyganek

src/components/MapView/Direction.tsx

@@ -3,7 +3,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {DirectionProps} from './MapViewTypes';
 
-function Direction({coordinates}: DirectionProps) {
+function Direction({coordinates, belowLayerID}: DirectionProps) {
     const styles = useThemeStyles();
     if (coordinates.length < 1) {
         return null;
@@ -22,7 +22,7 @@ function Direction({coordinates}: DirectionProps) {
             }}
         >
             <Mapbox.LineLayer
-                belowLayerID={CONST.MAP_VIEW_LAYERS.USER_LOCATION}
+                belowLayerID={belowLayerID}
                 id={CONST.MAP_VIEW_LAYERS.ROUTE_FILL}
                 style={styles.mapDirection}
             />

src/components/MapView/MapView.tsx

@@ -319,7 +319,12 @@ function MapView({
                     );
                 })}
 
-                {!!directionCoordinates && <Direction coordinates={directionCoordinates} />}
+                {!!directionCoordinates && (
+                    <Direction
+                        coordinates={directionCoordinates}
+                        belowLayerID={interactive ? CONST.MAP_VIEW_LAYERS.USER_LOCATION : undefined}
+                    />
+                )}
                 {!!distanceSymbolCoordinate && !!distanceInMeters && !!distanceUnit && (
                     <MarkerView
                         coordinate={distanceSymbolCoordinate}

src/components/MapView/MapViewTypes.ts

@@ -39,6 +39,9 @@ type MapViewProps = {
 type DirectionProps = {
     // Coordinates of points that constitute the direction
     coordinates: Coordinate[];
+
+    // ID of the layer to place the line layer below
+    belowLayerID?: string;
 };
 
 type PendingMapViewProps = {