Skip to main content
The MapViewRoute component provides several props to customize the visual appearance of the route line. These props control the color, width, and line styling of the rendered polyline.

​
Basic styling props

​
strokeColor

Type: string Default: #000 (black) Sets the color of the route line. Accepts any valid CSS color string. 
import MapView from 'react-native-maps';
import { MapViewRoute } from 'react-native-maps-routes';

<MapViewRoute
  origin={origin}
  destination={destination}
  apiKey={GOOGLE_MAPS_APIKEY}
  strokeColor="#3b82f6"
/>
On iOS, strokeColor is only supported for certain map providers. Check the react-native-maps documentation for platform-specific details.

​
strokeWidth

Type: number Default: 6 Sets the width of the route line in pixels. 
<MapViewRoute
  origin={origin}
  destination={destination}
  apiKey={GOOGLE_MAPS_APIKEY}
  strokeColor="#3b82f6"
  strokeWidth={8}
/>
Use wider strokes (8-12) for primary routes and thinner strokes (3-5) for alternative or less important routes.

​
Line styling props

​
lineCap

Type: 'butt' | 'round' | 'square' Default: 'round' Controls the shape of the line ends. 
<MapViewRoute
  origin={origin}
  destination={destination}
  apiKey={GOOGLE_MAPS_APIKEY}
  lineCap="round"
/>

<MapViewRoute lineCap="round" />
Creates rounded ends. This is the default and most commonly used option.
lineCap is not yet supported for the Google Maps provider on iOS.

​
lineJoin

Type: 'miter' | 'round' | 'bevel' Default: 'round' Controls the shape of corners where line segments meet. 
<MapViewRoute
  origin={origin}
  destination={destination}
  apiKey={GOOGLE_MAPS_APIKEY}
  lineJoin="round"
/>

<MapViewRoute lineJoin="round" />
Creates smooth, rounded corners. This is the default and provides the smoothest appearance.

​
Color examples

​
Hex colors

<MapViewRoute
  strokeColor="#3b82f6" // Blue
/>

<MapViewRoute
  strokeColor="#ef4444" // Red
/>

<MapViewRoute
  strokeColor="#22c55e" // Green
/>

​
RGB/RGBA colors

<MapViewRoute
  strokeColor="rgb(59, 130, 246)" // Blue
/>

<MapViewRoute
  strokeColor="rgba(59, 130, 246, 0.5)" // Semi-transparent blue
/>

​
Named colors

<MapViewRoute strokeColor="blue" />
<MapViewRoute strokeColor="red" />
<MapViewRoute strokeColor="green" />
Use semi-transparent colors (RGBA) when displaying multiple overlapping routes to show all paths clearly.

​
Complete styling example

import React from 'react';
import { StyleSheet } from 'react-native';
import MapView from 'react-native-maps';
import { MapViewRoute } from 'react-native-maps-routes';

const origin = { latitude: 37.7749, longitude: -122.4194 };
const destination = { latitude: 37.8049, longitude: -122.2712 };

function StyledRoute() {
  return (
    <MapView
      style={styles.map}
      initialRegion={{
        latitude: 37.79,
        longitude: -122.34,
        latitudeDelta: 0.1,
        longitudeDelta: 0.1,
      }}
    >
      <MapViewRoute
        origin={origin}
        destination={destination}
        apiKey="your-api-key-here"
        mode="DRIVE"
        strokeColor="#3b82f6"
        strokeWidth={8}
        lineCap="round"
        lineJoin="round"
      />
    </MapView>
  );
}

const styles = StyleSheet.create({
  map: {
    flex: 1,
  },
});

​
Styling by travel mode

Use different styles for different travel modes: 
import type { TravelMode } from 'react-native-maps-routes';

type RouteStyle = {
  color: string;
  width: number;
};

const getModeStyle = (mode: TravelMode): RouteStyle => {
  switch (mode) {
    case 'WALK':
      return { color: '#3b82f6', width: 4 }; // Blue, thin
    case 'DRIVE':
      return { color: '#ef4444', width: 6 }; // Red, medium
    case 'BICYCLE':
      return { color: '#22c55e', width: 5 }; // Green, medium-thin
    case 'TWO_WHEELER':
      return { color: '#f59e0b', width: 6 }; // Orange, medium
    default:
      return { color: '#000000', width: 6 }; // Black, medium
  }
};

function StyledRouteByMode({ mode }: { mode: TravelMode }) {
  const style = getModeStyle(mode);

  return (
    <MapView style={{ flex: 1 }}>
      <MapViewRoute
        origin={origin}
        destination={destination}
        apiKey={GOOGLE_MAPS_APIKEY}
        mode={mode}
        strokeColor={style.color}
        strokeWidth={style.width}
        lineCap="round"
        lineJoin="round"
      />
    </MapView>
  );
}

​
Styling multiple routes

Display multiple routes with different styles: 
function MultipleRoutes() {
  const origin = { latitude: 37.7749, longitude: -122.4194 };
  const destination1 = { latitude: 37.8049, longitude: -122.2712 };
  const destination2 = { latitude: 37.7849, longitude: -122.4094 };

  return (
    <MapView style={{ flex: 1 }}>
      {/* Primary route - bold blue */}
      <MapViewRoute
        origin={origin}
        destination={destination1}
        apiKey={GOOGLE_MAPS_APIKEY}
        strokeColor="#3b82f6"
        strokeWidth={8}
      />

      {/* Secondary route - thinner gray */}
      <MapViewRoute
        origin={origin}
        destination={destination2}
        apiKey={GOOGLE_MAPS_APIKEY}
        strokeColor="#9ca3af"
        strokeWidth={5}
      />
    </MapView>
  );
}

​
Styling alternatives on the same route

Compare different travel modes for the same journey: 
function CompareRouteModes() {
  const origin = { latitude: 37.7749, longitude: -122.4194 };
  const destination = { latitude: 37.8049, longitude: -122.2712 };

  return (
    <MapView style={{ flex: 1 }}>
      {/* Driving route - solid red */}
      <MapViewRoute
        origin={origin}
        destination={destination}
        apiKey={GOOGLE_MAPS_APIKEY}
        mode="DRIVE"
        strokeColor="#ef4444"
        strokeWidth={6}
      />

      {/* Walking route - semi-transparent blue */}
      <MapViewRoute
        origin={origin}
        destination={destination}
        apiKey={GOOGLE_MAPS_APIKEY}
        mode="WALK"
        strokeColor="rgba(59, 130, 246, 0.7)"
        strokeWidth={5}
      />

      {/* Cycling route - semi-transparent green */}
      <MapViewRoute
        origin={origin}
        destination={destination}
        apiKey={GOOGLE_MAPS_APIKEY}
        mode="BICYCLE"
        strokeColor="rgba(34, 197, 94, 0.7)"
        strokeWidth={5}
      />
    </MapView>
  );
}
When displaying multiple overlapping routes, use semi-transparent colors (RGBA) and vary the stroke widths to make all routes visible.

​
Theme-aware styling

Adapt route styling to light and dark themes: 
import { useColorScheme } from 'react-native';

function ThemedRoute() {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';

  return (
    <MapView style={{ flex: 1 }}>
      <MapViewRoute
        origin={origin}
        destination={destination}
        apiKey={GOOGLE_MAPS_APIKEY}
        strokeColor={isDark ? '#60a5fa' : '#3b82f6'}
        strokeWidth={6}
      />
    </MapView>
  );
}

​
Accessibility considerations

​
Color contrast

Ensure sufficient contrast between the route and the map: 
// Good contrast on light maps
<MapViewRoute strokeColor="#1e40af" strokeWidth={8} />

// Good contrast on dark maps
<MapViewRoute strokeColor="#60a5fa" strokeWidth={8} />

​
Line width

Use wider lines for better visibility: 
// Minimum recommended width for accessibility
<MapViewRoute strokeWidth={6} />

// Better for users with visual impairments
<MapViewRoute strokeWidth={10} />

​
Platform differences

Some styling features have platform-specific behavior:
  • strokeColor on iOS works differently depending on the map provider
  • lineCap is not supported for Google Maps on iOS
  • Always test your styles on both iOS and Android

​
Performance tips

  • Simpler styles (like round line joins) render faster than complex ones
  • Avoid changing style props frequently, as this triggers re-renders
  • Use memoization for style calculations when possible
import { useMemo } from 'react';

function PerformantStyledRoute({ mode }: { mode: TravelMode }) {
  const style = useMemo(() => getModeStyle(mode), [mode]);

  return (
    <MapViewRoute
      origin={origin}
      destination={destination}
      apiKey={GOOGLE_MAPS_APIKEY}
      mode={mode}
      strokeColor={style.color}
      strokeWidth={style.width}
    />
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us