# react-native-mapbox-direction

> A map with a direction displayed

Latest version **1.0.0** (published 2019-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-mapbox-direction
pnpm add react-native-mapbox-direction
yarn add react-native-mapbox-direction
bun add react-native-mapbox-direction
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-11-19 |
| First published | 2019-11-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | David GUERIN |
| Maintainers | afailla |
| Keywords | react-native |

## Links

- npm: https://www.npmjs.com/package/react-native-mapbox-direction
- npm.io page: https://npm.io/package/react-native-mapbox-direction

## Dependencies (4)

- [mapbox](https://npm.io/package/mapbox.md) ^1.0.0-beta10
- [turf-point](https://npm.io/package/turf-point.md) ^2.0.1
- [@turf/helpers](https://npm.io/package/@turf/helpers.md) ^6.1.4
- [@turf/distance](https://npm.io/package/@turf/distance.md) ^6.0.1

## Recent versions

- 1.0.0 (latest) — 2019-11-19

## README

# react-native-mapbox-direction

## Getting started

`$ npm install react-native-mapbox-direction --save`

#### Or

`$ yarn add react-native-mapbox-direction`

## You need to install [react-native-mapbox-gl](https://github.com/mapbox/react-native-mapbox-gl) in your project first!

## Props

| Name | Type | Required | Description |
| :---         |     :---:      |     :---:      | :---         |
| mapBoxApiKey      | string     | Yes    | Your Mapbox API key                                       |
| ref               | function   | No     | MapView Reference                                         |
| startingPoint     | object     | Yes    | An object containing departure's latitude and longitude   |
| endingPoint       | object     | Yes    | An object containing destination's latitude and longitude |
| color             | string     | Yes    | Direction's color                                         |
| onDirectionChange | function   | No     | Return an object with distance and duration               |

## Usage
```javascript
import { MapView } from 'react-native-mapbox-direction';

    ...

    // Zoom out to display starting point and ending point if in Global mode
    // Follow your current location if in Course mode
    moveCamera = () => {
        this.mapRef.moveCamera(); 
    }

    ...

    render() {

        ...

        <MapView 
            mapBoxApiKey={APIKEY}
            navigationMode="Course" // Or "Global"
            ref={instance => this.mapRef = instance}
            startingPoint={{
                latitude: 48.857908, 
                longitude: 2.302661,
            }}
            endingPoint={{
                latitude: 48.858192, 
                longitude: 2.294981,
            }}
            color="green"
        />

        ...

    }

    ...

}

```

## TODO

- [x] Display direction on map
- [x] Change camera modes "Course" or "Global"
- [ ] Add possibility to add an array of points between starting and ending points
- [ ] Remove route parts when moving in realtime


[daavidaviid](https://github.com/daavidaviid)

---
_Source: https://npm.io/package/react-native-mapbox-direction · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._