react-native-map-link

!React Native Map Link


---

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.

Installation

$3

``shell
npm i -S react-native-map-link # or yarn add react-native-map-link
`

$3

Based on the platforms your app supports, you also need to:

Simple example

`js
import {showLocation} from 'react-native-map-link';

showLocation({
latitude: 38.8976763,
longitude: -77.0387185,
title: 'Your destination',
});
`

Full usage

Using the showLocation function will shown an action sheet on iOS and an alert on Android, without any custom styling:

`js
import {showLocation} from 'react-native-map-link';

showLocation({
latitude: 38.8976763,
longitude: -77.0387185,
sourceLatitude: -8.0870631, // optionally specify starting location for directions
sourceLongitude: -34.8941619, // required if sourceLatitude is specified
title: 'The White House', // optional
googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title
googlePlaceId: 'ChIJGVtI4by3t4kRr51d_Qm_x58', // optionally specify the google-place-id
alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
dialogTitle: 'This is the dialog Title', // optional (default: 'Open in Maps')
dialogMessage: 'This is the amazing dialog Message', // optional (default: 'What app would you like to use?')
cancelText: 'This is the cancel button text', // optional (default: 'Cancel')
appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)
appsBlackList: ['uber'], // optionally you can set which apps NOT to show (default: will show all supported apps installed on device)
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.
appTitles: {'google-maps': 'My custom Google Maps title'}, // optionally you can override default app titles
app: 'uber', // optionally specify specific app to use
directionsMode: 'walk', // optional, accepted values are 'car', 'walk', 'public-transport' or 'bike'
});
`

Alternatively you can specify the address field and leave the latitude and longitude properties as empty strings

`js
import {showLocation} from 'react-native-map-link';

showLocation({
address: '1600 Pennsylvania Avenue NW, Washington, DC 20500', // Required if replacing latitude and longitude
app: 'comgooglemaps', // optionally specify specific app to use
});
`

Notes:

- The sourceLatitude / sourceLongitude options only work if you specify both. Currently supports all apps except Waze.
- 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.
- 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.
- 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.

$3

Using the getApps function will return an array (GetAppResult[]) with the apps available on the smartphone:

`ts
type GetAppResult = {
id: string;
name: string;
icon: NodeRequire;
open: () => Promise;
};
`

`tsx
import {getApps, GetAppResult} from 'react-native-map-link';

const Demo = () => {
const [availableApps, setAvailableApps] = useState([]);

useEffect(() => {
(async () => {
const result = await getApps({
latitude: 38.8976763,
longitude: -77.0387185,
address: '1600 Pennsylvania Avenue NW, Washington, DC 20500', // optional
title: 'The White House', // optional
googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title
alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)
appsBlackList: ['uber'], // optionally you can set which apps NOT to show (default: will show all supported apps installed on device)
});
setAvailableApps(result);
})();
}, []);

return (

{availableApps.map(({icon, name, id, open}) => (


{name}

))}

);
};
``

More information

- Using this library with Expo
- Alternative usage: styled popup
- Adding support for new maps apps

---