{"id":13941773,"url":"https://github.com/bramus/react-native-maps-directions","last_synced_at":"2025-05-14T15:10:56.491Z","repository":{"id":40625913,"uuid":"111329469","full_name":"bramus/react-native-maps-directions","owner":"bramus","description":"Directions Component for `react-native-maps`","archived":false,"fork":false,"pushed_at":"2024-06-11T07:47:59.000Z","size":139,"stargazers_count":1265,"open_issues_count":65,"forks_count":203,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-05T00:44:57.834Z","etag":null,"topics":["google-maps","google-maps-api","mapkit","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bramus.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"bramus","-custom":["https://www.paypal.me/bramus","https://www.bram.us/"]}},"created_at":"2017-11-19T20:27:42.000Z","updated_at":"2025-05-02T04:46:12.000Z","dependencies_parsed_at":"2024-11-19T07:18:08.129Z","dependency_job_id":null,"html_url":"https://github.com/bramus/react-native-maps-directions","commit_stats":{"total_commits":115,"total_committers":25,"mean_commits":4.6,"dds":"0.34782608695652173","last_synced_commit":"4029f05e8d885db829fb21efd90c4d1d85a6ae2e"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Freact-native-maps-directions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Freact-native-maps-directions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Freact-native-maps-directions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Freact-native-maps-directions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bramus","download_url":"https://codeload.github.com/bramus/react-native-maps-directions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252605117,"owners_count":21775204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-maps","google-maps-api","mapkit","react-native"],"created_at":"2024-08-08T02:01:28.260Z","updated_at":"2025-05-14T15:10:56.162Z","avatar_url":"https://github.com/bramus.png","language":"JavaScript","funding_links":["https://github.com/sponsors/bramus","https://www.paypal.me/bramus","https://www.bram.us/"],"categories":["React Native","JavaScript"],"sub_categories":["Maps"],"readme":"# `react-native-maps-directions`\n\n[![npm Version](https://img.shields.io/npm/v/react-native-maps-directions.svg?style=flat)](https://www.npmjs.com/package/react-native-maps-directions)\n[![npm Downloads](https://img.shields.io/npm/dm/react-native-maps-directions.svg)](https://www.npmtrends.com/react-native-maps-directions)\n[![Contributors](https://img.shields.io/github/contributors/bramus/react-native-maps-directions.svg)](https://github.com/bramus/react-native-maps-directions/graphs/contributors)\n[![GitHub Last Commit](https://img.shields.io/github/last-commit/bramus/react-native-maps-directions.svg)](https://github.com/bramus/react-native-maps-directions)\n[![License](https://img.shields.io/npm/l/react-native-maps-directions.svg)](LICENSE.md)\n\nDirections component for [`react-native-maps`](https://github.com/airbnb/react-native-maps/) – Draw a route between two coordinates, powered by the Google Maps Directions API\n\n![react-native-maps-directions](https://user-images.githubusercontent.com/213073/33188062-efc86e24-d096-11e7-87eb-6925291bc809.png)\n\n## Installation\n\nInstall `react-native-maps-directions` as a dependency using either\n\n- [Node's `npm`](https://nodejs.org/en/download/)\n\n  ```\n  npm install react-native-maps-directions\n  ```\n\n- [Yarn](https://yarnpkg.com/en/docs/install)\n\n  ```\n  yarn add react-native-maps-directions\n  ```\n\n## Basic Usage\n\nImport `MapViewDirections` and render it as a child of a `MapView` component. The mandatory `MapViewDirections` props are:\n\n- `origin`: The origin location to start routing from\n- `destination`: The destination location to start routing to\n- `apikey`: Your Google Maps Directions API Key _(request one [here](https://developers.google.com/maps/documentation/directions/get-api-key); if you're using an existing Google Maps API Key make sure you've enabled the Google Maps Directions API for that key using the [Google API Console](https://console.developers.google.com/apis/))_.\n\n```js\nimport MapViewDirections from 'react-native-maps-directions';\n\nconst origin = {latitude: 37.3318456, longitude: -122.0296002};\nconst destination = {latitude: 37.771707, longitude: -122.4053769};\nconst GOOGLE_MAPS_APIKEY = '…';\n\n\u003cMapView initialRegion={…}\u003e\n  \u003cMapViewDirections\n    origin={origin}\n    destination={destination}\n    apikey={GOOGLE_MAPS_APIKEY}\n  /\u003e\n\u003c/MapView\u003e\n```\n\nOnce the directions in between `destination` and `origin` has been fetched, a `MapView.Polyline` between the two will be drawn. Whenever one of both changes, new directions will be fetched and rendered.\n\n## Component API\n\n### Props\n\n| Prop | Type | Default | Note\n|---|---|---|---|\n| `origin` | `LatLng` or `String` | | The origin location to start routing from.\n| `destination` | `LatLng` or `String` | | The destination location to start routing to.\n| `apikey` | `String` | | Your Google Maps API Key _(request one [here](https://developers.google.com/maps/documentation/directions/get-api-key); if you're using an existing Google Maps API Key make sure you've enabled the Google Maps Directions API for that key using the [Google API Console](https://console.developers.google.com/apis/) by hitting the “Enable APIs and Services“ button)_.\n| `waypoints` | [`LatLng` or `String`] | `[]` | Array of waypoints to use between origin and destination.\n| `language` | `String` | `\"en\"` | The language to use when calculating directions. See [here](https://developers.google.com/maps/documentation/javascript/localization) for more info.\n| `mode` | `String` | `\"DRIVING\"` | Which transportation mode to use when calculating directions. Allowed values are `\"DRIVING\"`, `\"BICYCLING\"`, `\"WALKING\"`, and `\"TRANSIT\"`. _(See [here](https://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes) for more info)_.\n| `resetOnChange` | `boolean` | `true` | Tweak if the rendered `MapView.Polyline` should reset or not when calculating the route between `origin` and `destionation`. Set to `false` if you see the directions line glitching.\n| `optimizeWaypoints` | `boolean` | `false` | Set it to true if you would like Google Maps to re-order all the waypoints to optimize the route for the fastest route. Please be aware that if this option is enabled, you will be billed at a higher rate by Google as stated [here](https://developers.google.com/maps/documentation/javascript/directions#Waypoints).\n| `splitWaypoints` | `boolean` | `false` | Directions API has a [limit](https://developers.google.com/maps/documentation/directions/usage-and-billing#directions-advanced) of 10 or 25 (depends on the billing plan) waypoints per route. When exceeding this limit you will be billed at a higher reate by Google. Set this to `true` if you would like to automatically split waypoints into multiple routes, thus bypassing this waypoints limit.\n| `directionsServiceBaseUrl` | `string` | _(Google's)_ | Base URL of the Directions Service (API) you are using. By default the Google Directions API is used (`\"https://maps.googleapis.com/maps/api/directions/json\"`). Usually you won't need to change this.\n| `region` | `String` | | If you are using strings for **origin** or **destination**, sometimes you will get an incorrect route because Google Maps API needs the region where this places belong to. See [here](https://developers.google.com/maps/documentation/javascript/localization#Region) for more info.\n| `precision` | `String` | `\"low\"` | The precision level of detail of the drawn polyline. Allowed values are \"high\", and \"low\". Setting to \"low\" will yield a polyline that is an approximate (smoothed) path of the resulting directions. Setting to \"high\" may cause a hit in performance in case a complex route is returned.\n| `timePrecision` | `String` | `\"none\"` | The timePrecision to get Realtime traffic info. Allowed values are \"none\", and \"now\". Defaults to \"none\".\n| `channel` | `String` | `null` | If you include the channel parameter in your requests, you can generate a Successful Requests report that shows a breakdown of your application's API requests across different applications that use the same client ID (such as externally facing access vs. internally facing access).\n#### More props\n\nSince the result rendered on screen is a `MapView.Polyline` component, all [`MapView.Polyline` props](https://github.com/airbnb/react-native-maps/blob/master/docs/polyline.md#props) – except for `coordinates` – are also accepted.\n\n```js\n\u003cMapView initialRegion={…}\u003e\n  \u003cMapViewDirections\n    origin={origin}\n    destination={destination}\n    apikey={GOOGLE_MAPS_APIKEY}\n    strokeWidth={3}\n    strokeColor=\"hotpink\"\n  /\u003e\n\u003c/MapView\u003e\n```\n\n#### An extra note on `origin` and `destination`\n\nThe values for the `origin` and `destination` props can take several forms. They can either be:\n\n- Coordinates in the form of an object with `latitude` and `longitude` keys\n- Coordinates in the form of a string  with `latitude` and `longitude` values separated by a comma\n- Strings representing an address\n- Strings representing a location\n- Strings containing a Place Id from the Google Maps Place API prefixed with `place_id:`\n\nAll examples below have the same `origin` location, represented in the formats mentioned above:\n\n```js\n\u003cMapViewDirections origin={{ latitude: 37.3317876, longitude: -122.0054812 }} destination=\"…\" /\u003e\n\u003cMapViewDirections origin=\"37.3317876,-122.0054812\" destination=\"…\" /\u003e\n\u003cMapViewDirections origin=\"Apple Park Visitor Center\" destination=\"…\" /\u003e\n\u003cMapViewDirections origin=\"10600 N Tantau Ave, Cupertino, CA 95014, USA\" destination=\"…\" /\u003e\n\u003cMapViewDirections origin=\"place_id:ChIJW5i0tJC1j4ARoUGtkogTaUU\" destination=\"…\" /\u003e\n```\n\nNote: The `origin` and `destination` props don't need to use the same representation, you may mix them.\n\nTip: Don't forget to tweak the `language` prop when using localized location names.\n\n### Events/Callbacks\n\n| Event Name | Returns | Notes\n|---|---|---|\n| `onStart` | `{ origin, destination, waypoints: [] }` | Callback that is called when the routing has started.\n| `onReady` | `{ distance: Number, duration: Number, coordinates: [], fare: Object, waypointOrder: [[]] }` | Callback that is called when the routing has succesfully finished. Note: distance returned in kilometers and duration in minutes.\n| `onError` | `errorMessage` | Callback that is called in case the routing has failed.\n\n## Extended Example\n\nThis example will draw a route between AirBnB's Office and Apple's HQ\n\n```js\nimport React, { Component } from 'react';\nimport { Dimensions, StyleSheet } from 'react-native';\nimport MapView from 'react-native-maps';\nimport MapViewDirections from 'react-native-maps-directions';\n\nconst { width, height } = Dimensions.get('window');\nconst ASPECT_RATIO = width / height;\nconst LATITUDE = 37.771707;\nconst LONGITUDE = -122.4053769;\nconst LATITUDE_DELTA = 0.0922;\nconst LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;\n\nconst GOOGLE_MAPS_APIKEY = '…';\n\nclass Example extends Component {\n\n  constructor(props) {\n    super(props);\n\n    // AirBnB's Office, and Apple Park\n    this.state = {\n      coordinates: [\n        {\n          latitude: 37.3317876,\n          longitude: -122.0054812,\n        },\n        {\n          latitude: 37.771707,\n          longitude: -122.4053769,\n        },\n      ],\n    };\n\n    this.mapView = null;\n  }\n\n  onMapPress = (e) =\u003e {\n    this.setState({\n      coordinates: [\n        ...this.state.coordinates,\n        e.nativeEvent.coordinate,\n      ],\n    });\n  }\n\n  render() {\n    return (\n      \u003cMapView\n        initialRegion={{\n          latitude: LATITUDE,\n          longitude: LONGITUDE,\n          latitudeDelta: LATITUDE_DELTA,\n          longitudeDelta: LONGITUDE_DELTA,\n        }}\n        style={StyleSheet.absoluteFill}\n        ref={c =\u003e this.mapView = c}\n        onPress={this.onMapPress}\n      \u003e\n        {this.state.coordinates.map((coordinate, index) =\u003e\n          \u003cMapView.Marker key={`coordinate_${index}`} coordinate={coordinate} /\u003e\n        )}\n        {(this.state.coordinates.length \u003e= 2) \u0026\u0026 (\n          \u003cMapViewDirections\n            origin={this.state.coordinates[0]}\n            waypoints={ (this.state.coordinates.length \u003e 2) ? this.state.coordinates.slice(1, -1): undefined}\n            destination={this.state.coordinates[this.state.coordinates.length-1]}\n            apikey={GOOGLE_MAPS_APIKEY}\n            strokeWidth={3}\n            strokeColor=\"hotpink\"\n            optimizeWaypoints={true}\n            onStart={(params) =\u003e {\n              console.log(`Started routing between \"${params.origin}\" and \"${params.destination}\"`);\n            }}\n            onReady={result =\u003e {\n              console.log(`Distance: ${result.distance} km`)\n              console.log(`Duration: ${result.duration} min.`)\n\n              this.mapView.fitToCoordinates(result.coordinates, {\n                edgePadding: {\n                  right: (width / 20),\n                  bottom: (height / 20),\n                  left: (width / 20),\n                  top: (height / 20),\n                }\n              });\n            }}\n            onError={(errorMessage) =\u003e {\n              // console.log('GOT AN ERROR');\n            }}\n          /\u003e\n        )}\n      \u003c/MapView\u003e\n    );\n  }\n}\n\nexport default Example;\n```\n\n## Example App\n\nAn example app can be found in a separate repo, located at [https://github.com/bramus/react-native-maps-directions-example](https://github.com/bramus/react-native-maps-directions-example).\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Credits\n\n- Bram(us) Van Damme \u003cem\u003e([https://www.bram.us/](https://www.bram.us/))\u003c/em\u003e\n- [All Contributors](../../contributors)\n\nThis code is inspired upon the article [React Native Maps with Google Directions Api](https://medium.com/@ali_oguzhan/react-native-maps-with-google-directions-api-bc716ed7a366) by [Ali Oğuzhan Yıldız](https://github.com/alioguzhan).\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbramus%2Freact-native-maps-directions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbramus%2Freact-native-maps-directions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbramus%2Freact-native-maps-directions/lists"}