Accept waypoint with marker component & add directionStyle prop

src/MapView/Direction.tsx

@@ -1,6 +1,7 @@
 import Mapbox from '@rnmapbox/maps';
+import {DirectionProps} from './MapViewTypes';
 
-function Direction({coordinates}: {coordinates: Array<[number, number]>}) {
+function Direction({coordinates, directionStyle}: DirectionProps) {
     if (coordinates.length < 1) {
         return null;
     }
@@ -20,8 +21,8 @@ function Direction({coordinates}: {coordinates: Array<[number, number]>}) {
             <Mapbox.LineLayer
                 id="routeFill"
                 style={{
-                    lineColor: 'blue',
-                    lineWidth: 3,
+                    lineColor: directionStyle?.color ?? '#000000',
+                    lineWidth: directionStyle?.width ?? 1,
                 }}
             />
         </Mapbox.ShapeSource>

src/MapView/Direction.web.tsx

@@ -1,7 +1,8 @@
 import {Layer, Source} from 'react-map-gl';
 import {View} from 'react-native';
+import {DirectionProps} from './MapViewTypes';
 
-function Direction({coordinates}: {coordinates: Array<[number, number]>}) {
+function Direction({coordinates, directionStyle}: DirectionProps) {
     if (coordinates.length < 1) {
         return null;
     }
@@ -25,7 +26,7 @@ function Direction({coordinates}: {coordinates: Array<[number, number]>}) {
                         type="line"
                         source="route"
                         layout={{'line-join': 'round', 'line-cap': 'round'}}
-                        paint={{'line-color': '#888', 'line-width': 4}}
+                        paint={{'line-color': directionStyle?.color ?? '#000000', 'line-width': directionStyle?.width ?? 1}}
                     />
                 </Source>
             )}

src/MapView/MapView.tsx

@@ -6,7 +6,7 @@ import Direction from './Direction';
 import Utils from './utils';
 
 const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
-    {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, markerComponent: MarkerComponent, directionCoordinates},
+    {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, directionCoordinates, directionStyle},
     ref,
 ) {
     const cameraRef = useRef<Mapbox.Camera>(null);
@@ -17,12 +17,12 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
         }
 
         if (waypoints.length === 1) {
-            cameraRef.current?.flyTo(waypoints[0]);
+            cameraRef.current?.flyTo(waypoints[0].coordinate);
             cameraRef.current?.zoomTo(15);
             return undefined;
         }
 
-        const {southWest, northEast} = Utils.getBounds(waypoints);
+        const {southWest, northEast} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));
         return {
             ne: northEast,
             sw: southWest,
@@ -61,18 +61,22 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
                     }}
                     bounds={bounds}
                 />
-                {MarkerComponent &&
-                    waypoints &&
-                    waypoints.map((waypoint) => (
+                {waypoints &&
+                    waypoints.map(({coordinate, markerComponent: MarkerComponent}) => (
                         <MarkerView
-                            id={`${waypoint[0]},${waypoint[1]}`}
-                            key={`${waypoint[0]},${waypoint[1]}`}
-                            coordinate={waypoint}
+                            id={`${coordinate[0]},${coordinate[1]}`}
+                            key={`${coordinate[0]},${coordinate[1]}`}
+                            coordinate={coordinate}
                         >
                             <MarkerComponent />
                         </MarkerView>
                     ))}
-                {directionCoordinates && <Direction coordinates={directionCoordinates} />}
+                {directionCoordinates && (
+                    <Direction
+                        coordinates={directionCoordinates}
+                        directionStyle={directionStyle}
+                    />
+                )}
             </Mapbox.MapView>
         </View>
     );

src/MapView/MapView.web.tsx

@@ -17,10 +17,7 @@ const getMapDimension = (mapRef: RefObject<MapRef>): {width: number; height: num
     return {width: clientWidth, height: clientHeight};
 };
 
-const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
-    {accessToken, waypoints, style, mapPadding, markerComponent: MarkerComponent, directionCoordinates, initialState = DEFAULT_INITIAL_STATE},
-    ref,
-) {
+const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView({accessToken, waypoints, style, mapPadding, directionCoordinates, initialState = DEFAULT_INITIAL_STATE}, ref) {
     const mapRef = useRef<MapRef>(null);
     const [bounds, setBounds] = useState<{
         longitude: number;
@@ -35,13 +32,13 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
 
         if (waypoints.length === 1) {
             mapRef.current?.flyTo({
-                center: waypoints[0],
+                center: waypoints[0].coordinate,
                 zoom: 15,
             });
             return;
         }
 
-        const {northEast, southWest} = Utils.getBounds(waypoints);
+        const {northEast, southWest} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));
         const {width, height} = getMapDimension(mapRef) || {
             width: 0,
             height: 0,
@@ -80,13 +77,12 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
                 mapStyle="mapbox://styles/mapbox/streets-v9"
                 {...bounds}
             >
-                {MarkerComponent &&
-                    waypoints &&
-                    waypoints.map((waypoint) => (
+                {waypoints &&
+                    waypoints.map(({coordinate, markerComponent: MarkerComponent}) => (
                         <Marker
-                            key={`${waypoint[0]},${waypoint[1]}`}
-                            longitude={waypoint[0]}
-                            latitude={waypoint[1]}
+                            key={`${coordinate[0]},${coordinate[1]}`}
+                            longitude={coordinate[0]}
+                            latitude={coordinate[1]}
                         >
                             <MarkerComponent />
                         </Marker>

src/MapView/MapViewTypes.ts

@@ -13,16 +13,39 @@ export type MapViewProps = {
     // Padding to apply when the map is adjusted to fit waypoints and directions
     mapPadding?: number;
     // Initial coordinate and zoom level
-    initialState?: {
-        location: [number, number];
-        zoom: number;
-    };
+    initialState?: InitialState;
     // Locations on which to put markers
-    waypoints?: Array<[number, number]>;
-    // React component to use for the marker. If not provided, markers are not displayed for waypoints.
-    markerComponent?: ComponentType;
+    waypoints?: WayPoint[];
     // List of coordinates which together forms a direction.
     directionCoordinates?: Array<[number, number]>;
+    // Style used for the line that displays direction
+    directionStyle?: DirectionStyle;
+};
+
+export type DirectionProps = {
+    // Coordinates of points that constitute the direction
+    coordinates: Array<[number, number]>;
+    // Style used for the line that displays direction
+    directionStyle?: DirectionStyle;
+};
+
+// Initial state of the map
+type InitialState = {
+    // Coordinate on which to center the map
+    location: [number, number];
+    zoom: number;
+};
+
+// Waypoint to be displayed on the map
+type WayPoint = {
+    coordinate: [number, number];
+    markerComponent: ComponentType;
+};
+
+// Style used for the line that displays direction
+type DirectionStyle = {
+    width?: number;
+    color?: string;
 };
 
 export type MapViewHandle = {