Gathering detailed insights and metrics for react-native-map-link
Gathering detailed insights and metrics for react-native-map-link
Installations
npm install react-native-map-linkDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.19.0
NPM Version
10.4.0
Releases
27
Languages
2
TypeScript
JavaScript
TypeScript (97.3%)
JavaScript (2.7%)
Developer
tschoffelen
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
763 Stars
610 Commits
147 Forks
6 Watchers
1 Branches
61 Contributors
Updated on Jul 02, 2025
Maintainers
2
Package Meta Information
Latest Version
3.9.0
Package Id
react-native-map-link@3.9.0
Unpacked Size
303.26 kB
Size
251.07 kB
File Count
50
NPM Version
10.4.0
Node Version
20.19.0
Published on
Apr 01, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Dev Dependencies
27
@babel/core@babel/eslint-parser@babel/eslint-plugin@babel/runtime@expo/config-plugins@react-native-community/eslint-config@types/jest@types/react@types/react-native@types/react-test-renderer@typescript-eslint/eslint-plugin@typescript-eslint/parserbabel-jestclsxeslinteslint-plugin-flowtypeeslint-plugin-jesteslint-plugin-prettierjestmetro-react-native-babel-presetprettierreactreact-nativereact-native-typescript-transformersemantic-releasets-jesttypescript
An easy way to open a location in a map app of the user's choice, based on the apps they have installed on their device. The app supports Apple Maps, Google Maps, Citymapper, Uber, and a dozen other apps.
Full list of supported apps
- Apple Maps –
apple-maps - Google Maps –
google-maps - Citymapper –
citymapper - Uber –
uber - Lyft –
lyft - The Transit App –
transit - TruckMap –
truckmap - Waze –
waze - Yandex.Navi –
yandex - Moovit –
moovit - Yandex Taxi –
yandex-taxi - Yandex Maps –
yandex-maps - Kakao Map –
kakaomap - TMAP -
tmap - Mapy.cz –
mapycz - Maps.me –
maps-me - OsmAnd -
osmand - Gett -
gett - Naver Map -
navermap - 2GIS -
dgis - Liftago -
liftago - Petal Maps -
petalmaps(Android only) - Sygic -
sygic
Installation
1. Install the package
1npm i -S react-native-map-link # or yarn add react-native-map-link
2. Post-install steps
Based on the platforms your app supports, you also need to:
iOS – Update Info.plist
To 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.
Just 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.
1<key>LSApplicationQueriesSchemes</key> 2<array> 3 <string>comgooglemaps</string> 4 <string>citymapper</string> 5 <string>uber</string> 6 <string>lyft</string> 7 <string>transit</string> 8 <string>truckmap</string> 9 <string>waze</string> 10 <string>yandexnavi</string> 11 <string>moovit</string> 12 <string>yandextaxi</string> 13 <string>yandexmaps</string> 14 <string>kakaomap</string> 15 <string>tmap</string> 16 <string>szn-mapy</string> 17 <string>mapsme</string> 18 <string>osmandmaps</string> 19 <string>gett</string> 20 <string>nmap</string> 21 <string>dgis</string> 22 <string>lftgpas</string> 23 <string>sygic</string> 24</array>
Using Expo? Read the instructions to make it work on iOS.
Android – Update AndroidManifest.xml
When 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 security feature. We'll have to update our AndroidManifest.xml to explicitly allow querying for other apps.
You can do so by coping the <queries> statement below, and pasting it in the top level of your AndroidManifest (i.e. within the <manifest> ... </manifest>).
1<queries> 2 <intent> 3 <action android:name="android.intent.action.VIEW" /> 4 <data android:scheme="http"/> 5 </intent> 6 <intent> 7 <action android:name="android.intent.action.VIEW" /> 8 <data android:scheme="https"/> 9 </intent> 10 <intent> 11 <action android:name="android.intent.action.VIEW" /> 12 <data android:scheme="geo" /> 13 </intent> 14 <intent> 15 <action android:name="android.intent.action.VIEW" /> 16 <data android:scheme="google.navigation" /> 17 </intent> 18 <intent> 19 <action android:name="android.intent.action.VIEW" /> 20 <data android:scheme="applemaps" /> 21 </intent> 22 <intent> 23 <action android:name="android.intent.action.VIEW" /> 24 <data android:scheme="citymapper" /> 25 </intent> 26 <intent> 27 <action android:name="android.intent.action.VIEW" /> 28 <data android:scheme="uber" /> 29 </intent> 30 <intent> 31 <action android:name="android.intent.action.VIEW" /> 32 <data android:scheme="lyft" /> 33 </intent> 34 <intent> 35 <action android:name="android.intent.action.VIEW" /> 36 <data android:scheme="transit" /> 37 </intent> 38 <intent> 39 <action android:name="android.intent.action.VIEW" /> 40 <data android:scheme="truckmap" /> 41 </intent> 42 <intent> 43 <action android:name="android.intent.action.VIEW" /> 44 <data android:scheme="waze" /> 45 </intent> 46 <intent> 47 <action android:name="android.intent.action.VIEW" /> 48 <data android:scheme="yandexnavi" /> 49 </intent> 50 <intent> 51 <action android:name="android.intent.action.VIEW" /> 52 <data android:scheme="moovit" /> 53 </intent> 54 <intent> 55 <action android:name="android.intent.action.VIEW" /> 56 <data android:scheme="yandexmaps://maps.yandex." /> 57 </intent> 58 <intent> 59 <action android:name="android.intent.action.VIEW" /> 60 <data android:scheme="yandextaxi" /> 61 </intent> 62 <intent> 63 <action android:name="android.intent.action.VIEW" /> 64 <data android:scheme="kakaomap" /> 65 </intent> 66 <intent> 67 <action android:name="android.intent.action.VIEW" /> 68 <data android:scheme="tmap" /> 69 </intent> 70 <intent> 71 <action android:name="android.intent.action.VIEW" /> 72 <data android:scheme="mapycz" /> 73 </intent> 74 <intent> 75 <action android:name="android.intent.action.VIEW" /> 76 <data android:scheme="mapsme" /> 77 </intent> 78 <intent> 79 <action android:name="android.intent.action.VIEW" /> 80 <data android:scheme="osmand.geo" /> 81 </intent> 82 <intent> 83 <action android:name="android.intent.action.VIEW" /> 84 <data android:scheme="gett" /> 85 </intent> 86 <intent> 87 <action android:name="android.intent.action.VIEW" /> 88 <data android:scheme="nmap" /> 89 </intent> 90 <intent> 91 <action android:name="android.intent.action.VIEW" /> 92 <data android:scheme="dgis" /> 93 </intent> 94 <intent> 95 <action android:name="android.intent.action.VIEW" /> 96 <data android:scheme="lftgpas" /> 97 </intent> 98 <intent> 99 <action android:name="android.intent.action.VIEW" /> 100 <data android:scheme="petalmaps" /> 101 </intent> 102 <intent> 103 <action android:name="android.intent.action.VIEW" /> 104 <data android:scheme="com.sygic.aura" /> 105 </intent> 106</queries>
If you're running into a 'unexpected element <queries> found in <manifest>' error, make sure you have an updated version of Gradle in your android/build.gradle file:
1classpath("com.android.tools.build:gradle:3.5.4")
More info here.
Expo – Update app.json
Simple example
1import {showLocation} from 'react-native-map-link'; 2 3showLocation({ 4 latitude: 38.8976763, 5 longitude: -77.0387185, 6 title: 'Your destination', 7});
Full usage
Using the showLocation function will shown an action sheet on iOS and an alert on Android, without any custom styling:
1import {showLocation} from 'react-native-map-link';
2
3showLocation({
4 latitude: 38.8976763,
5 longitude: -77.0387185,
6 sourceLatitude: -8.0870631, // optionally specify starting location for directions
7 sourceLongitude: -34.8941619, // required if sourceLatitude is specified
8 title: 'The White House', // optional
9 googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title
10 googlePlaceId: 'ChIJGVtI4by3t4kRr51d_Qm_x58', // optionally specify the google-place-id
11 alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
12 dialogTitle: 'This is the dialog Title', // optional (default: 'Open in Maps')
13 dialogMessage: 'This is the amazing dialog Message', // optional (default: 'What app would you like to use?')
14 cancelText: 'This is the cancel button text', // optional (default: 'Cancel')
15 appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)
16 appsBlackList: ['uber'], // optionally you can set which apps NOT to show (default: will show all supported apps installed on device)
17 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.
18 appTitles: {'google-maps': 'My custom Google Maps title'}, // optionally you can override default app titles
19 app: 'uber', // optionally specify specific app to use
20 directionsMode: 'walk', // optional, accepted values are 'car', 'walk', 'public-transport' or 'bike'
21});Alternatively you can specify the address field and leave the latitude and longitude properties as empty strings
1import {showLocation} from 'react-native-map-link';
2
3showLocation({
4 address: '1600 Pennsylvania Avenue NW, Washington, DC 20500', // Required if replacing latitude and longitude
5 app: 'comgooglemaps', // optionally specify specific app to use
6});Notes:
- The
sourceLatitude/sourceLongitudeoptions only work if you specify both. Currently supports all apps except Waze. directionsModeworks on google-maps, apple-maps and sygic (on apple-maps,bikemode will not work, while on sygic, onlywalkandcarwill work). Without setting it, the app will decide based on its own settings.- If you set
directionsModebut do not setsourceLatitudeandsourceLongitude, google-maps and apple-maps will still enter directions mode, and use the current location as starting point. - If you want to query an address instead of passing the
latitudeandlongitudefields, you can do this by leaving those fields off and provide a full address to be queried with theaddressfield. Just be aware that not all applications support this.
Or
Using the getApps function will return an array (GetAppResult[]) with the apps available on the smartphone:
1type GetAppResult = { 2 id: string; 3 name: string; 4 icon: NodeRequire; 5 open: () => Promise<void>; 6};
1import {getApps, GetAppResult} from 'react-native-map-link';
2
3const Demo = () => {
4 const [availableApps, setAvailableApps] = useState<GetAppResult[]>([]);
5
6 useEffect(() => {
7 (async () => {
8 const result = await getApps({
9 latitude: 38.8976763,
10 longitude: -77.0387185,
11 address: '1600 Pennsylvania Avenue NW, Washington, DC 20500', // optional
12 title: 'The White House', // optional
13 googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title
14 alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
15 appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)
16 appsBlackList: ['uber'], // optionally you can set which apps NOT to show (default: will show all supported apps installed on device)
17 });
18 setAvailableApps(result);
19 })();
20 }, []);
21
22 return (
23 <React.Fragment>
24 {availableApps.map(({icon, name, id, open}) => (
25 <Pressable key={id} onPress={open}>
26 <Image source={icon} />
27 <Text>{name}</Text>
28 </Pressable>
29 ))}
30 </React.Fragment>
31 );
32};More information
Get professional support for this package →
Custom consulting sessions available for implementation support or feature development.
Custom consulting sessions available for implementation support or feature development.
No vulnerabilities found.
No security vulnerabilities found.