React Native Maps Line Arrow

Add-on to react-native-maps to add arrow or any other component to the end of the Polyline component Provides a workaround for react-native-maps issue #3096

Works both with Expo-managed and bare workflows.

Installation

npm install react-native-map-maps-line-arrow react-native-maps --save

Usage

Please refer to a working expo-managed app in /example folder.

1. Instead of built-in <MapView> and <Polyline> components from react-native-maps, use components from this package:

import { MapViewWithHeading, ArrowedPolyline } from 'react-native-maps-line-arrow';

2. Use components the same way you would use <MapView> and <Polyline>:

...
{/* don't use this code */}
{/* <MapView>
  <Polyline coordinates={COORDINATES} />
</MapView> */}

<MapViewWithHeading>
  <ArrowedPolyline coordinates={COORDINATES} />
</MapViewWithHeading>
...

Props

MapViewWithHeading

Inherits all the properties of <MapView>, as described here. Has one own property, which is optional:

• Component: ReactComponent default: MapView (from react-native-maps) Obviously, the passed component has to be able to render map, so passing a <View> will not work. However, when additional wrapper over react-native-maps is needed (e.g. react-map-clustering), it can be passed here. Please refer to an app in the /example folder.

ArrowedPolyline

Inherits all the properties of <Polyline> component, as described here. Has three own properties, all of them are optional:

• arrowSize: number default: 10 The size of an arrow pointer that will be used

• addOnlyLastArrow: boolean default: false By default, arrow pointers are drawn to all segments of the line. If set to true, the arrow pointer will be drawn only to the last segment of the polyline.

• arrow: function:ReactComponent default: triangle composed of a <View> components It is possible to use custom pointer. This should be a function returning React Component. Please note if you use a custom component: in the default state (when no rotation applied) the component should point to the top.

Examples

Notes

1. Arrow is created by the <Marker> component, which is rotated to align with the line.
2. Calculation is based on spheric Earth form, which may result in slight angle aberration for some arrows which, however, should not be noticeable.
3. Arrows are drawn both for "geodesic" (shortest distance) and straight lines.

Known Issue

When user manually rotates the map, arrows follow this rotation with a slight but visible delay. This is caused by the asynchronous nature of the getCamera method of <MapView> component. There is currently no remedy for this.