Add-on to react-native-maps to add arrow or any other component to the end of the Polyline component
npm install react-native-maps-line-arrowAdd-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.
``
npm install react-native-map-maps-line-arrow react-native-maps --save
1. Instead of built-in and components from react-native-maps, use components from this package:`js`
import { MapViewWithHeading, ArrowedPolyline } from 'react-native-maps-line-arrow';
2. Use components the same way you would use and :`js
...
{/ don't use this code /}
{/*
...
`
, 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 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.$3
Inherits all the properties of 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
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
!examples
Notes
1. Arrow is created by the 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