{"id":14070609,"url":"https://github.com/tschoffelen/react-native-map-link","last_synced_at":"2025-05-14T01:02:10.024Z","repository":{"id":37867495,"uuid":"112875353","full_name":"tschoffelen/react-native-map-link","owner":"tschoffelen","description":"🗺 Open the map app of the user's choice.","archived":false,"fork":false,"pushed_at":"2025-04-01T10:07:20.000Z","size":2789,"stargazers_count":741,"open_issues_count":4,"forks_count":146,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-14T05:52:54.634Z","etag":null,"topics":["android","directions","ios","maps","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/tschoffelen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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":"tschoffelen"}},"created_at":"2017-12-02T20:42:59.000Z","updated_at":"2025-04-12T08:22:19.000Z","dependencies_parsed_at":"2024-04-17T08:33:39.477Z","dependency_job_id":"49673c66-661f-4cde-87cc-e2a3911a6e9f","html_url":"https://github.com/tschoffelen/react-native-map-link","commit_stats":{"total_commits":420,"total_committers":69,"mean_commits":6.086956521739131,"dds":0.769047619047619,"last_synced_commit":"751c5ff5b1f4938b277284778822ce51bb953cf1"},"previous_names":["tschoffelen/react-native-map-link","includable/react-native-map-link"],"tags_count":98,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tschoffelen%2Freact-native-map-link","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tschoffelen%2Freact-native-map-link/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tschoffelen%2Freact-native-map-link/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tschoffelen%2Freact-native-map-link/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tschoffelen","download_url":"https://codeload.github.com/tschoffelen/react-native-map-link/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830389,"owners_count":21168272,"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":["android","directions","ios","maps","react-native"],"created_at":"2024-08-13T07:07:56.046Z","updated_at":"2025-04-14T05:53:04.046Z","avatar_url":"https://github.com/tschoffelen.png","language":"TypeScript","funding_links":["https://github.com/sponsors/tschoffelen"],"categories":["TypeScript"],"sub_categories":[],"readme":"![React Native Map Link](https://lowcdn.com/2x/8f2/3ab63c0fe3f9-00fb302c20/banner.svg)\n\n[![GitHub release](https://img.shields.io/npm/v/react-native-map-link.svg)](https://www.npmjs.com/package/react-native-map-link)\n[![npm](https://img.shields.io/npm/dm/react-native-map-link.svg)](https://www.npmjs.com/package/react-native-map-link)\n[![GitHub license](https://img.shields.io/github/license/flexible-agency/react-native-map-link.svg)](https://github.com/flexible-agency/react-native-map-link/blob/master/LICENSE)\n\n---\n\nAn easy way to open a location in a map app of the user's choice, based on the apps they have installed\non their device. The app supports Apple Maps, Google Maps, Citymapper, Uber, and a dozen other apps.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eFull list of supported apps\u003c/strong\u003e\u003c/summary\u003e\n\n- Apple Maps – `apple-maps`\n- Google Maps – `google-maps`\n- Citymapper – `citymapper`\n- Uber – `uber`\n- Lyft – `lyft`\n- The Transit App – `transit`\n- TruckMap – `truckmap`\n- Waze – `waze`\n- Yandex.Navi – `yandex`\n- Moovit – `moovit`\n- Yandex Taxi – `yandex-taxi`\n- Yandex Maps – `yandex-maps`\n- Kakao Map – `kakaomap`\n- TMAP - `tmap`\n- Mapy.cz – `mapycz`\n- Maps.me – `maps-me`\n- OsmAnd - `osmand`\n- Gett - `gett`\n- Naver Map - `navermap`\n- 2GIS - `dgis`\n- Liftago - `liftago`\n- Petal Maps - `petalmaps` (Android only)\n- Sygic - `sygic`\n\n\u003c/details\u003e\n\n\u003cbr /\u003e\u003cp align=\"center\"\u003e\n\u003cimg src=\"./docs/example.png\" alt=\"Example screenshot\" width=\"320\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\n### 1. Install the package\n\n```shell\nnpm i -S react-native-map-link      # or yarn add react-native-map-link\n```\n\n### 2. Post-install steps\n\nBased on the platforms your app supports, you also need to:\n\n\u003cdetails id=\"iOSPostInstall\"\u003e\n\u003csummary\u003e\u003cstrong\u003eiOS – Update Info.plist\u003c/strong\u003e\u003c/summary\u003e\n\nTo allow your app to detect if any of the directions apps are installed, an extra step is required on iOS. Your app needs to provide the `LSApplicationQueriesSchemes` key inside `ios/{my-project}/Info.plist` to specify the URL schemes with which the app can interact.\n\nJust add this in your `Info.plist` depending on which apps you'd like to support. Omitting these might mean that the library can't detect some of the maps apps installed by the user.\n\n```xml\n\u003ckey\u003eLSApplicationQueriesSchemes\u003c/key\u003e\n\u003carray\u003e\n    \u003cstring\u003ecomgooglemaps\u003c/string\u003e\n    \u003cstring\u003ecitymapper\u003c/string\u003e\n    \u003cstring\u003euber\u003c/string\u003e\n    \u003cstring\u003elyft\u003c/string\u003e\n    \u003cstring\u003etransit\u003c/string\u003e\n    \u003cstring\u003etruckmap\u003c/string\u003e\n    \u003cstring\u003ewaze\u003c/string\u003e\n    \u003cstring\u003eyandexnavi\u003c/string\u003e\n    \u003cstring\u003emoovit\u003c/string\u003e\n    \u003cstring\u003eyandextaxi\u003c/string\u003e\n    \u003cstring\u003eyandexmaps\u003c/string\u003e\n    \u003cstring\u003ekakaomap\u003c/string\u003e\n    \u003cstring\u003etmap\u003c/string\u003e\n    \u003cstring\u003eszn-mapy\u003c/string\u003e\n    \u003cstring\u003emapsme\u003c/string\u003e\n    \u003cstring\u003eosmandmaps\u003c/string\u003e\n    \u003cstring\u003egett\u003c/string\u003e\n    \u003cstring\u003enmap\u003c/string\u003e\n    \u003cstring\u003edgis\u003c/string\u003e\n    \u003cstring\u003elftgpas\u003c/string\u003e\n    \u003cstring\u003esygic\u003c/string\u003e\n\u003c/array\u003e\n```\n\nUsing Expo? [Read the instructions](docs/expo.md) to make it work on iOS.\n\n\u003c/details\u003e\n\n\u003cdetails id=\"androidPostInstall\"\u003e\n\u003csummary\u003e\u003cstrong\u003eAndroid – Update AndroidManifest.xml\u003c/strong\u003e\u003c/summary\u003e\n\nWhen switching to Android 11/Android SDK 30 (i.e. using Expo SDK 41), this library doesn't work out of the box anymore. The reason is the new [Package Visibilty](https://developer.android.com/training/package-visibility) security feature. We'll have to update our `AndroidManifest.xml` to explicitly allow querying for other apps.\n\nYou can do so by coping the `\u003cqueries\u003e` statement below, and pasting it in the top level of your AndroidManifest (i.e. within the `\u003cmanifest\u003e ... \u003c/manifest\u003e`).\n\n```xml\n\u003cqueries\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"http\"/\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"https\"/\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"geo\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"google.navigation\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"applemaps\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"citymapper\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"uber\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"lyft\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"transit\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"truckmap\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"waze\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"yandexnavi\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"moovit\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"yandexmaps://maps.yandex.\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"yandextaxi\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"kakaomap\" /\u003e\n  \u003c/intent\u003e\n    \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"tmap\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"mapycz\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"mapsme\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"osmand.geo\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"gett\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"nmap\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"dgis\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"lftgpas\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"petalmaps\" /\u003e\n  \u003c/intent\u003e\n  \u003cintent\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003cdata android:scheme=\"com.sygic.aura\" /\u003e\n  \u003c/intent\u003e\n\u003c/queries\u003e\n```\n\nIf you're running into a 'unexpected element `\u003cqueries\u003e` found in `\u003cmanifest\u003e`' error, make sure you have an updated version of Gradle in your `android/build.gradle` file:\n\n```java\nclasspath(\"com.android.tools.build:gradle:3.5.4\")\n```\n\nMore info [here](https://stackoverflow.com/a/67383641/1129689).\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eExpo – Update app.json\u003c/strong\u003e\u003c/summary\u003e\n\n[Read the instructions here](docs/expo.md)\n\n\u003c/details\u003e\n\n## Simple example\n\n```js\nimport {showLocation} from 'react-native-map-link';\n\nshowLocation({\n  latitude: 38.8976763,\n  longitude: -77.0387185,\n  title: 'Your destination',\n});\n```\n\n## Full usage\n\nUsing the `showLocation` function will shown an action sheet on iOS and an alert on Android, without any custom styling:\n\n```js\nimport {showLocation} from 'react-native-map-link';\n\nshowLocation({\n  latitude: 38.8976763,\n  longitude: -77.0387185,\n  sourceLatitude: -8.0870631, // optionally specify starting location for directions\n  sourceLongitude: -34.8941619, // required if sourceLatitude is specified\n  title: 'The White House', // optional \n  googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title\n  googlePlaceId: 'ChIJGVtI4by3t4kRr51d_Qm_x58', // optionally specify the google-place-id\n  alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)\n  dialogTitle: 'This is the dialog Title', // optional (default: 'Open in Maps')\n  dialogMessage: 'This is the amazing dialog Message', // optional (default: 'What app would you like to use?')\n  cancelText: 'This is the cancel button text', // optional (default: 'Cancel')\n  appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)\n  appsBlackList: ['uber'], // optionally you can set which apps NOT to show (default: will show all supported apps installed on device)\n  naverCallerName: 'com.example.myapp', // to link into Naver Map You should provide your appname which is the bundle ID in iOS and applicationId in android.\n  appTitles: {'google-maps': 'My custom Google Maps title'}, // optionally you can override default app titles\n  app: 'uber', // optionally specify specific app to use\n  directionsMode: 'walk', // optional, accepted values are 'car', 'walk', 'public-transport' or 'bike'\n});\n```\n\nAlternatively you can specify the `address` field and leave the latitude and longitude properties as empty strings \n\n```js\nimport {showLocation} from 'react-native-map-link';\n\nshowLocation({\n  address: '1600 Pennsylvania Avenue NW, Washington, DC 20500', // Required if replacing latitude and longitude\n  app: 'comgooglemaps',  // optionally specify specific app to use\n});\n```\n\nNotes:\n\n- The `sourceLatitude` / `sourceLongitude` options only work if you specify both. Currently supports all apps except Waze.\n- `directionsMode` works on google-maps, apple-maps and sygic (on apple-maps, `bike` mode will not work, while on sygic, only `walk` and `car` will work). Without setting it, the app will decide based on its own settings.\n- If you set `directionsMode` but do not set `sourceLatitude` and `sourceLongitude`, google-maps and apple-maps will still enter directions mode, and use the current location as starting point.\n- If you want to query an address instead of passing the `latitude` and `longitude` fields, you can do this by leaving those fields off and provide a full address to be queried with the `address` field. Just be aware that not all applications support this.\n\n### Or\n\nUsing the `getApps` function will return an array (`GetAppResult[]`) with the apps available on the smartphone:\n\n```ts\ntype GetAppResult = {\n  id: string;\n  name: string;\n  icon: NodeRequire;\n  open: () =\u003e Promise\u003cvoid\u003e;\n};\n```\n\n```tsx\nimport {getApps, GetAppResult} from 'react-native-map-link';\n\nconst Demo = () =\u003e {\n  const [availableApps, setAvailableApps] = useState\u003cGetAppResult[]\u003e([]);\n\n  useEffect(() =\u003e {\n    (async () =\u003e {\n      const result = await getApps({\n        latitude: 38.8976763,\n        longitude: -77.0387185,\n        address: '1600 Pennsylvania Avenue NW, Washington, DC 20500', // optional \n        title: 'The White House', // optional\n        googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title\n        alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)\n        appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)\n        appsBlackList: ['uber'], // optionally you can set which apps NOT to show (default: will show all supported apps installed on device)\n      });\n      setAvailableApps(result);\n    })();\n  }, []);\n\n  return (\n    \u003cReact.Fragment\u003e\n      {availableApps.map(({icon, name, id, open}) =\u003e (\n        \u003cPressable key={id} onPress={open}\u003e\n          \u003cImage source={icon} /\u003e\n          \u003cText\u003e{name}\u003c/Text\u003e\n        \u003c/Pressable\u003e\n      ))}\n    \u003c/React.Fragment\u003e\n  );\n};\n```\n\n## More information\n\n- [Using this library with Expo](docs/expo.md)\n- [Alternative usage: styled popup](docs/popup.md)\n- [Adding support for new maps apps](docs/add-app.md)\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\t\u003cb\u003e\n\t\t\u003ca href=\"https://schof.co/consulting/?utm_source=flexible-agency/react-native-map-link\"\u003eGet professional support for this package →\u003c/a\u003e\n\t\u003c/b\u003e\n\t\u003cbr\u003e\n\t\u003csub\u003e\n\t\tCustom consulting sessions available for implementation support or feature development.\n\t\u003c/sub\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftschoffelen%2Freact-native-map-link","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftschoffelen%2Freact-native-map-link","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftschoffelen%2Freact-native-map-link/lists"}