react-native-map-link 2.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Includable
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,257 @@
+![React Native Map Link](https://lowcdn.com/2x/8f2/3ab63c0fe3f9-00fb302c20/banner.svg)
+
+[![GitHub release](https://img.shields.io/npm/v/react-native-map-link.svg)](https://www.npmjs.com/package/react-native-map-link)
+[![npm](https://img.shields.io/npm/dm/react-native-map-link.svg)](https://www.npmjs.com/package/react-native-map-link)
+[![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)
+
+---
+
+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.
+
+<details>
+<summary>Full list of supported apps</summary>
+
+- 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`
+- Mapy.cz – `mapycz`
+- Maps.me – `maps-me`
+- OsmAnd - `osmand`
+- Gett - `gett`
+- Naver Map - `navermap`
+- 2GIS - `dgis`
+- Liftago - `liftago`
+
+</details>
+
+## Installation
+
+### 1. Install the package
+
+```shell
+npm 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:
+
+<details>
+<summary><strong>iOS – Update Info.plist</strong></summary>
+
+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.
+
+```xml
+<key>LSApplicationQueriesSchemes</key>
+<array>
+    <string>comgooglemaps</string>
+    <string>citymapper</string>
+    <string>uber</string>
+    <string>lyft</string>
+    <string>transit</string>
+    <string>truckmap</string>
+    <string>waze</string>
+    <string>yandexnavi</string>
+    <string>moovit</string>
+    <string>yandextaxi</string>
+    <string>yandexmaps</string>
+    <string>kakaomap</string>
+    <string>szn-mapy</string>
+    <string>mapsme</string>
+    <string>osmandmaps</string>
+    <string>gett</string>
+    <string>nmap</string>
+    <string>dgis</string>
+    <string>lftgpas</string>
+</array>
+```
+
+Using Expo? [Read the instructions](docs/expo.md) to make it work on iOS.
+
+</details>
+
+<details>
+<summary><strong>Android – Update AndroidManifest.xml</strong></summary>
+
+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](https://developer.android.com/training/package-visibility) 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>`).
+
+```xml
+<queries>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="http"/>
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="https"/>
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="geo" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="google.navigation" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="applemaps" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="citymapper" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="uber" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="lyft" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="transit" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="truckmap" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="waze" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="yandexnavi" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="moovit" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="yandexmaps://maps.yandex." />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="yandextaxi" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="kakaomap" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="mapycz" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="mapsme" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="osmand.geo" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="gett" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="nmap" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="dgis" />
+  </intent>
+  <intent>
+    <action android:name="android.intent.action.VIEW" />
+    <data android:scheme="lftgpas" />
+  </intent>
+</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:
+
+```java
+classpath("com.android.tools.build:gradle:3.5.4")
+```
+
+More info [here](https://stackoverflow.com/a/67383641/1129689).
+
+</details>
+
+<details>
+<summary><strong>Expo – Update app.json</strong></summary>
+
+[Read the instructions here](docs/expo.md) to make it work on iOS.
+
+</details>
+
+## 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,  // not optional 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)
+    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'
+})
+```
+
+Notes:
+
+- The `sourceLatitude/sourceLongitude` options only work if you specify both. Currently supports all apps except Waze.
+- Works on google-maps and apple-maps (on the latter, `bike` mode will not work). Without setting `directionsMode`, the app will decide based on his own settings.
+
+## More information
+
+- [Using this library with Expo](docs/expo.md)
+- [Alternative usage: styled popup](docs/popup.md)
+- [Adding support for new maps apps](docs/add-app.md)
+
+<br /><br />
+
+---
+
+<div align="center">
+	<b>
+		<a href="https://schof.co/consulting/?utm_source=flexible-agency/react-native-map-link">Get professional support for this package →</a>
+	</b>
+	<br>
+	<sub>
+		Custom consulting sessions availabe for implementation support or feature development.
+	</sub>
+</div>

package/index.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {ViewStyle, StyleProp, ImageStyle, TextStyle} from 'react-native';
+
+interface Options {
+  latitude: number | string;
+  longitude: number | string;
+  sourceLatitude?: number;
+  sourceLongitude?: number;
+  alwaysIncludeGoogle?: boolean;
+  googleForceLatLon?: boolean;
+  googlePlaceId?: string;
+  title?: string;
+  app?: string;
+  dialogTitle?: string;
+  dialogMessage?: string;
+  cancelText?: string;
+  appsWhiteList?: string[];
+  appTitles?: {[key: string]: string};
+  naverCallerName?: string;
+  directionsMode?: 'car' | 'walk' | 'public-transport' | 'bike';
+}
+
+interface PopupStyleProp {
+  container?: StyleProp<ViewStyle>;
+  itemContainer?: StyleProp<ViewStyle>;
+  image?: StyleProp<ImageStyle>;
+  itemText?: StyleProp<TextStyle>;
+  headerContainer?: StyleProp<ViewStyle>;
+  titleText?: StyleProp<TextStyle>;
+  subtitleText?: StyleProp<TextStyle>;
+  cancelButtonContainer?: StyleProp<ViewStyle>;
+  cancelButtonText?: StyleProp<TextStyle>;
+  separatorStyle?: StyleProp<ViewStyle>;
+  activityIndicatorContainer?: StyleProp<ViewStyle>;
+}
+
+interface PopupProps {
+  isVisible: boolean;
+  showHeader?: boolean;
+  customHeader?: React.ReactNode;
+  customFooter?: React.ReactNode;
+  onCancelPressed: () => void;
+  onBackButtonPressed: () => void;
+  onAppPressed: () => void;
+  style?: PopupStyleProp;
+  modalProps?: object;
+  options: Options;
+  appsWhiteList: string[];
+  appTitles?: {[key: string]: string};
+}
+
+export function showLocation(
+  options: Options,
+): Promise<string | undefined | null>;
+export class Popup extends React.Component<PopupProps> {}

package/index.js

@@ -0,0 +1,11 @@
+/**
+ * React Native Map Link
+ */
+
+import Popup from './src/components/Popup'
+import { showLocation } from './src'
+
+export {
+  showLocation,
+  Popup
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "react-native-map-link",
+  "version": "2.8.0",
+  "description": "Open the map app of the user's choice with a specific location",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/includable/react-native-map-link.git"
+  },
+  "scripts": {
+    "lint": "eslint src --max-warnings=0 && eslint tests --max-warnings=0",
+    "test": "jest"
+  },
+  "keywords": [
+    "react-native",
+    "react-component",
+    "maps",
+    "link",
+    "linking",
+    "react",
+    "ios",
+    "android"
+  ],
+  "author": "Thomas Schoffelen <thomas@includable.com> (https://includable.com/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/includable/react-native-map-link/issues"
+  },
+  "homepage": "https://github.com/includable/react-native-map-link#readme",
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "react-native-modal": "^10.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.40.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@babel/runtime": "^7.8.4",
+    "@react-native-community/eslint-config": "^1.1.0",
+    "babel-jest": "^25.1.0",
+    "eslint": "^6.5.1",
+    "jest": "^25.1.0",
+    "metro-react-native-babel-preset": "^0.61.0",
+    "react-native": "^0.64.1"
+  },
+  "jest": {
+    "preset": "react-native",
+    "setupFiles": [
+      "./tests/setup.js"
+    ]
+  }
+}

package/src/components/Popup.js

@@ -0,0 +1,298 @@
+/**
+ * React Native Map Link
+ */
+
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  Dimensions,
+  FlatList,
+  ActivityIndicator,
+} from 'react-native';
+import PropTypes from 'prop-types';
+import Modal from 'react-native-modal';
+
+import {getAvailableApps, checkNotSupportedApps} from '../utils';
+import {showLocation} from '../index';
+import {generateTitles, icons, generatePrefixes} from '../constants';
+
+const SCREEN_HEIGHT = Dimensions.get('screen').height;
+
+const colors = {
+  black: '#464646',
+  gray: '#BBC4CC',
+  lightGray: '#ACBBCB',
+  lightBlue: '#ECF2F8',
+};
+
+export default class Popup extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      apps: [],
+      loading: true,
+      titles: generateTitles(props.appTitles),
+    };
+
+    this._renderAppItem = this._renderAppItem.bind(this);
+  }
+
+  componentDidMount() {
+    this.loadApps();
+  }
+
+  async loadApps() {
+    const {appsWhiteList, options} = this.props;
+    let apps = await getAvailableApps(generatePrefixes(options));
+    if (appsWhiteList && appsWhiteList.length) {
+      checkNotSupportedApps(appsWhiteList);
+      apps = apps.filter((appName) =>
+        this.props.appsWhiteList.includes(appName),
+      );
+    }
+
+    this.setState({apps, loading: false});
+  }
+
+  _renderHeader() {
+    const {showHeader, customHeader, options} = this.props;
+    if (!showHeader) {
+      return null;
+    }
+    if (customHeader) {
+      return customHeader;
+    }
+
+    const dialogTitle =
+      options.dialogTitle && options.dialogTitle.length
+        ? options.dialogTitle
+        : 'Open in Maps';
+    const dialogMessage =
+      options.dialogMessage && options.dialogMessage.length
+        ? options.dialogMessage
+        : 'What app would you like to use?';
+
+    return (
+      <View style={[styles.headerContainer, this.props.style.headerContainer]}>
+        <Text style={[styles.titleText, this.props.style.titleText]}>
+          {dialogTitle}
+        </Text>
+        {dialogMessage && dialogMessage.length ? (
+          <Text style={[styles.subtitleText, this.props.style.subtitleText]}>
+            {dialogMessage}
+          </Text>
+        ) : null}
+      </View>
+    );
+  }
+
+  _renderApps() {
+    return (
+      <FlatList
+        ItemSeparatorComponent={() => (
+          <View
+            style={[styles.separatorStyle, this.props.style.separatorStyle]}
+          />
+        )}
+        data={this.state.apps}
+        renderItem={this._renderAppItem}
+        keyExtractor={(item) => item}
+      />
+    );
+  }
+
+  _renderAppItem({item}) {
+    return (
+      <TouchableOpacity
+        key={item}
+        style={[styles.itemContainer, this.props.style.itemContainer]}
+        onPress={() => this._onAppPressed({app: item})}>
+        <View>
+          <Image
+            style={[styles.image, this.props.style.image]}
+            source={icons[item]}
+          />
+        </View>
+        <Text style={[styles.itemText, this.props.style.itemText]}>
+          {this.state.titles[item]}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+
+  _renderCancelButton() {
+    const {options} = this.props;
+    const cancelText =
+      options.cancelText && options.cancelText.length
+        ? options.cancelText
+        : 'Cancel';
+    return (
+      <TouchableOpacity
+        style={[
+          styles.cancelButtonContainer,
+          this.props.style.cancelButtonContainer,
+        ]}
+        onPress={this.props.onCancelPressed}>
+        <Text
+          style={[styles.cancelButtonText, this.props.style.cancelButtonText]}>
+          {cancelText}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+
+  _renderFooter() {
+    const {customFooter} = this.props;
+    if (customFooter) {
+      return customFooter;
+    }
+    return this._renderCancelButton();
+  }
+
+  _onAppPressed({app}) {
+    showLocation({...this.props.options, app});
+    this.props.onAppPressed(app);
+  }
+
+  render() {
+    const {loading} = this.state;
+    return (
+      <Modal
+        isVisible={this.props.isVisible}
+        backdropColor={colors.black}
+        animationIn="slideInUp"
+        hideModalContentWhileAnimating
+        useNativeDriver
+        onBackButtonPress={this.props.onBackButtonPressed}
+        {...this.props.modalProps}>
+        <View style={[styles.container, this.props.style.container]}>
+          {this._renderHeader()}
+          {loading ? (
+            <ActivityIndicator
+              style={[
+                styles.activityIndicatorContainer,
+                this.props.style.activityIndicatorContainer,
+              ]}
+            />
+          ) : (
+            this._renderApps()
+          )}
+          {this._renderFooter()}
+        </View>
+      </Modal>
+    );
+  }
+}
+
+Popup.propTypes = {
+  isVisible: PropTypes.bool,
+  showHeader: PropTypes.bool,
+  customHeader: PropTypes.element,
+  customFooter: PropTypes.element,
+  onBackButtonPressed: PropTypes.func,
+  onAppPressed: PropTypes.func,
+  onCancelPressed: PropTypes.func,
+  style: PropTypes.object,
+  modalProps: PropTypes.object,
+  options: PropTypes.object.isRequired,
+  appsWhiteList: PropTypes.array,
+};
+
+Popup.defaultProps = {
+  isVisible: false,
+  showHeader: true,
+  customHeader: null,
+  customFooter: null,
+  style: {
+    container: {},
+    itemContainer: {},
+    image: {},
+    itemText: {},
+    headerContainer: {},
+    titleText: {},
+    subtitleText: {},
+    cancelButtonContainer: {},
+    cancelButtonText: {},
+    separatorStyle: {},
+    activityIndicatorContainer: {},
+  },
+  modalProps: {},
+  options: {},
+  appsWhiteList: null,
+  onBackButtonPressed: () => {},
+  onCancelPressed: () => {},
+  onAppPressed: () => {},
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    borderRadius: 10,
+    overflow: 'hidden',
+    maxHeight: SCREEN_HEIGHT * 0.6,
+  },
+  itemContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  image: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+  },
+  itemText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: colors.black,
+    marginLeft: 15,
+  },
+  headerContainer: {
+    borderWidth: 1,
+    borderColor: 'transparent',
+    borderBottomColor: colors.lightBlue,
+    padding: 15,
+  },
+  titleText: {
+    fontSize: 16,
+    textAlign: 'center',
+    color: colors.black,
+  },
+  subtitleText: {
+    fontSize: 12,
+    color: colors.lightGray,
+    textAlign: 'center',
+    marginTop: 10,
+  },
+  cancelButtonContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+    borderWidth: 1,
+    borderColor: 'transparent',
+    borderTopColor: colors.lightBlue,
+  },
+  cancelButtonText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: colors.gray,
+  },
+  separatorStyle: {
+    flex: 1,
+    height: 1,
+    backgroundColor: colors.lightBlue,
+  },
+  activityIndicatorContainer: {
+    height: 70,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/constants.js

@@ -0,0 +1,89 @@
+/**
+ * React Native Map Link
+ */
+
+import {Platform} from 'react-native';
+
+export const isIOS = Platform.OS === 'ios';
+
+export function generatePrefixes(options) {
+  return {
+    'apple-maps': isIOS ? 'maps://' : 'applemaps://',
+    'google-maps': prefixForGoogleMaps(options.alwaysIncludeGoogle),
+    citymapper: 'citymapper://',
+    uber: 'uber://',
+    lyft: 'lyft://',
+    transit: 'transit://',
+    truckmap: 'truckmap://',
+    waze: 'waze://',
+    yandex: 'yandexnavi://',
+    moovit: 'moovit://',
+    'yandex-maps': 'yandexmaps://maps.yandex.ru/',
+    'yandex-taxi': 'yandextaxi://',
+    kakaomap: 'kakaomap://',
+    mapycz: isIOS ? 'szn-mapy://' : 'mapycz://',
+    'maps-me': 'mapsme://',
+    osmand: isIOS ? 'osmandmaps://' : 'osmand.geo://',
+    gett: 'gett://',
+    navermap: options.naverCallerName ? 'nmap://' : 'nmap-disabled://',
+    dgis: 'dgis://2gis.ru/',
+    liftago: 'lftgpas://',
+  };
+}
+
+export function prefixForGoogleMaps(alwaysIncludeGoogle) {
+  return isIOS && !alwaysIncludeGoogle
+    ? 'comgooglemaps://'
+    : 'https://www.google.com/maps/';
+}
+
+export function generateTitles(titles) {
+  return {
+    'apple-maps': 'Apple Maps',
+    'google-maps': 'Google Maps',
+    citymapper: 'Citymapper',
+    uber: 'Uber',
+    lyft: 'Lyft',
+    transit: 'The Transit App',
+    truckmap: 'TruckMap',
+    waze: 'Waze',
+    yandex: 'Yandex.Navi',
+    moovit: 'Moovit',
+    'yandex-taxi': 'Yandex Taxi',
+    'yandex-maps': 'Yandex Maps',
+    kakaomap: 'Kakao Maps',
+    mapycz: 'Mapy.cz',
+    'maps-me': 'Maps Me',
+    osmand: 'OsmAnd',
+    gett: 'Gett',
+    navermap: 'Naver Map',
+    dgis: '2GIS',
+    liftago: 'Liftago',
+    ...(titles || {}),
+  };
+}
+
+export const icons = {
+  'apple-maps': require('./images/apple-maps.png'),
+  'google-maps': require('./images/google-maps.png'),
+  citymapper: require('./images/citymapper.png'),
+  uber: require('./images/uber.png'),
+  lyft: require('./images/lyft.png'),
+  transit: require('./images/transit.png'),
+  truckmap: require('./images/truckmap.png'),
+  waze: require('./images/waze.png'),
+  yandex: require('./images/yandex.png'),
+  moovit: require('./images/moovit.png'),
+  'yandex-taxi': require('./images/yandex-taxi.png'),
+  'yandex-maps': require('./images/yandex-maps.png'),
+  kakaomap: require('./images/kakao-map.png'),
+  mapycz: require('./images/mapycz.png'),
+  'maps-me': require('./images/maps-me.png'),
+  osmand: require('./images/osmand.png'),
+  gett: require('./images/gett.png'),
+  navermap: require('./images/naver-map.png'),
+  dgis: require('./images/dgis.png'),
+  liftago: require('./images/liftago.png'),
+};
+
+export const appKeys = Object.keys(icons);

package/src/index.js

@@ -0,0 +1,280 @@
+/**
+ * React Native Map Link
+ */
+
+import {Linking} from 'react-native';
+
+import {generatePrefixes, generateTitles, isIOS} from './constants';
+import {askAppChoice, checkOptions} from './utils';
+
+/**
+ * Open a maps app, or let the user choose what app to open, with the given location.
+ *
+ * @param {{
+ *     latitude: number | string,
+ *     longitude: number | string,
+ *     sourceLatitude: number | undefined | null,
+ *     sourceLongitude: number | undefined | null,
+ *     alwaysIncludeGoogle: boolean | undefined | null,
+ *     googleForceLatLon: boolean | undefined | null,
+ *     googlePlaceId: number | undefined | null,
+ *     title: string | undefined | null,
+ *     app: string | undefined | null
+ *     dialogTitle: string | undefined | null
+ *     dialogMessage: string | undefined | null
+ *     cancelText: string | undefined | null
+ *     appsWhiteList: array | undefined | null
+ *     appTitles: object | undefined | null
+ *     naverCallerName: string | undefined
+ *     directionsMode: 'car' | 'walk' | 'public-transport' | 'bike' | undefined
+ * }} options
+ */
+export async function showLocation(options) {
+  const prefixes = generatePrefixes(options);
+  checkOptions(options, prefixes);
+
+  let useSourceDestiny = false;
+  let sourceLat;
+  let sourceLng;
+  let sourceLatLng;
+
+  if ('sourceLatitude' in options && 'sourceLongitude' in options) {
+    useSourceDestiny = true;
+    sourceLat = parseFloat(options.sourceLatitude);
+    sourceLng = parseFloat(options.sourceLongitude);
+    sourceLatLng = `${sourceLat},${sourceLng}`;
+  }
+
+  const lat = parseFloat(options.latitude);
+  const lng = parseFloat(options.longitude);
+  const latlng = `${lat},${lng}`;
+  const title = options.title && options.title.length ? options.title : null;
+  const encodedTitle = encodeURIComponent(title);
+  let app = options.app && options.app.length ? options.app : null;
+  const dialogTitle =
+    options.dialogTitle && options.dialogTitle.length
+      ? options.dialogTitle
+      : 'Open in Maps';
+  const dialogMessage =
+    options.dialogMessage && options.dialogMessage.length
+      ? options.dialogMessage
+      : 'What app would you like to use?';
+  const cancelText =
+    options.cancelText && options.cancelText.length
+      ? options.cancelText
+      : 'Cancel';
+  const appsWhiteList =
+    options.appsWhiteList && options.appsWhiteList.length
+      ? options.appsWhiteList
+      : null;
+
+  if (!app) {
+    app = await askAppChoice({
+      dialogTitle,
+      dialogMessage,
+      cancelText,
+      appsWhiteList,
+      prefixes,
+      appTitles: generateTitles(options.appTitles),
+    });
+  }
+
+  let url = null;
+
+  const getDirectionsModeAppleMaps = () => {
+    switch (options.directionsMode) {
+      case 'car':
+        return 'd';
+
+      case 'walk':
+        return 'w';
+
+      case 'public-transport':
+        return 'r';
+
+      default:
+        return undefined;
+    }
+  };
+
+  const getDirectionsModeGoogleMaps = () => {
+    switch (options.directionsMode) {
+      case 'car':
+        return 'driving';
+
+      case 'walk':
+        return 'walking';
+
+      case 'public-transport':
+        return 'transit';
+
+      case 'bike':
+        return 'bicycling';
+
+      default:
+        return undefined;
+    }
+  };
+
+  switch (app) {
+    case 'apple-maps':
+      const appleDirectionMode = getDirectionsModeAppleMaps();
+      url = prefixes['apple-maps'];
+      url = useSourceDestiny
+        ? `${url}?saddr=${sourceLatLng}&daddr=${latlng}`
+        : `${url}?ll=${latlng}`;
+      url += `&q=${title ? encodedTitle : 'Location'}`;
+      url += appleDirectionMode ? `&dirflg=${appleDirectionMode}` : '';
+      break;
+    case 'google-maps':
+      const googleDirectionMode = getDirectionsModeGoogleMaps();
+      // Always using universal URL instead of URI scheme since the latter doesn't support all parameters (#155)
+      url = 'https://www.google.com/maps/dir/?api=1';
+      if (useSourceDestiny) {
+        url += `&origin=${sourceLatLng}`;
+      }
+      if (!options.googleForceLatLon && title) {
+        url += `&destination=${encodedTitle}`;
+      } else {
+        url += `&destination=${latlng}`;
+      }
+
+      url += options.googlePlaceId
+        ? `&destination_place_id=${options.googlePlaceId}`
+        : '';
+
+      url += googleDirectionMode ? `&travelmode=${googleDirectionMode}` : '';
+      break;
+    case 'citymapper':
+      url = `${prefixes.citymapper}directions?endcoord=${latlng}`;
+
+      if (title) {
+        url += `&endname=${encodedTitle}`;
+      }
+
+      if (useSourceDestiny) {
+        url += `&startcoord=${sourceLatLng}`;
+      }
+      break;
+    case 'uber':
+      url = `${prefixes.uber}?action=setPickup&dropoff[latitude]=${lat}&dropoff[longitude]=${lng}`;
+
+      if (title) {
+        url += `&dropoff[nickname]=${encodedTitle}`;
+      }
+
+      url += useSourceDestiny
+        ? `&pickup[latitude]=${sourceLat}&pickup[longitude]=${sourceLng}`
+        : '&pickup=my_location';
+
+      break;
+    case 'lyft':
+      url = `${prefixes.lyft}ridetype?id=lyft&destination[latitude]=${lat}&destination[longitude]=${lng}`;
+
+      if (useSourceDestiny) {
+        url += `&pickup[latitude]=${sourceLat}&pickup[longitude]=${sourceLng}`;
+      }
+
+      break;
+    case 'transit':
+      url = `${prefixes.transit}directions?to=${latlng}`;
+
+      if (useSourceDestiny) {
+        url += `&from=${sourceLatLng}`;
+      }
+      break;
+    case 'truckmap':
+      url = `http://truckmap.com/place/${lat},${lng}`;
+
+      if (useSourceDestiny) {
+        url = `http://truckmap.com/route/${sourceLat},${sourceLng}/${lat},${lng}`;
+      }
+      break;
+    case 'waze':
+      url = `${prefixes.waze}?ll=${latlng}&navigate=yes`;
+      if (title) {
+        url += `&q=${encodedTitle}`;
+      }
+      break;
+    case 'yandex':
+      url = `${prefixes.yandex}build_route_on_map?lat_to=${lat}&lon_to=${lng}`;
+
+      if (useSourceDestiny) {
+        url += `&lat_from=${sourceLat}&lon_from=${sourceLng}`;
+      }
+      break;
+    case 'moovit':
+      url = `${prefixes.moovit}directions?dest_lat=${lat}&dest_lon=${lng}`;
+
+      if (title) {
+        url += `&dest_name=${encodedTitle}`;
+      }
+
+      if (useSourceDestiny) {
+        url += `&orig_lat=${sourceLat}&orig_lon=${sourceLng}`;
+      }
+      break;
+    case 'yandex-taxi':
+      url = `${prefixes['yandex-taxi']}route?end-lat=${lat}&end-lon=${lng}&appmetrica_tracking_id=1178268795219780156`;
+
+      break;
+    case 'yandex-maps':
+      url = `${prefixes['yandex-maps']}?pt=${lng},${lat}`;
+
+      break;
+    case 'kakaomap':
+      url = `${prefixes.kakaomap}look?p=${latlng}`;
+
+      if (useSourceDestiny) {
+        url = `${prefixes.kakaomap}route?sp=${sourceLat},${sourceLng}&ep=${latlng}&by=CAR`;
+      }
+      break;
+    case 'mapycz':
+      url = `${prefixes.mapycz}www.mapy.cz/zakladni?x=${lng}&y=${lat}&source=coor&id=${lng},${lat}`;
+
+      break;
+    case 'maps-me':
+      url = `${prefixes['maps-me']}route?sll=${sourceLat},${sourceLng}&saddr= &dll=${lat},${lng}&daddr=${title}&type=vehicle`;
+
+      break;
+    case 'osmand':
+      url = isIOS
+        ? `${prefixes.osmand}?lat=${lat}&lon=${lng}`
+        : `${prefixes.osmand}?q=${lat},${lng}`;
+
+      break;
+    case 'gett':
+      url = `${prefixes.gett}order?pickup=my_location&dropoff_latitude=${lat}&dropoff_longitude=${lng}`;
+
+      break;
+    case 'navermap':
+      url = `${prefixes.navermap}map?lat=${lat}&lng=${lng}&appname=${options.naverCallerName}`;
+
+      if (useSourceDestiny) {
+        url = `${prefixes.navermap}route?slat=${sourceLat}&slng=${sourceLng}&dlat=${lat}&dlng=${lng}&appname=${options.naverCallerName}`;
+      }
+      break;
+    case 'dgis':
+      url = `${prefixes.dgis}routeSearch/to/${lng},${lat}/go`;
+
+      if (useSourceDestiny) {
+        url = `${prefixes.dgis}routeSearch/to/${lng},${lat}/from/${sourceLng},${sourceLat}/go`;
+      }
+      break;
+    case 'liftago':
+      url = `${prefixes.liftago}order?destinationLat=${lat}&destinationLon=${lng}`;
+
+      if (title) {
+        url += `&destinationName=${encodedTitle}`;
+      }
+
+      if (useSourceDestiny) {
+        url += `&pickupLat=${sourceLat}&pickupLon=${sourceLng}`;
+      }
+      break;
+  }
+
+  if (url) {
+    return Linking.openURL(url).then(() => Promise.resolve(app));
+  }
+}

package/src/utils.js

@@ -0,0 +1,232 @@
+/**
+ * React Native Map Link
+ */
+
+import {Linking, ActionSheetIOS, Alert} from 'react-native';
+
+import {appKeys, isIOS} from './constants';
+
+/**
+ * Get available navigation apps.
+ */
+export const getAvailableApps = async (prefixes) => {
+  const availableApps = [];
+  for (const app in prefixes) {
+    if (prefixes.hasOwnProperty(app)) {
+      const avail = await isAppInstalled(app, prefixes);
+      if (avail) {
+        availableApps.push(app);
+      }
+    }
+  }
+
+  return availableApps;
+};
+
+/**
+ * Check if a given map app is installed.
+ *
+ * @param {string} app
+ * @param {object} prefixes
+ * @returns {Promise<boolean>}
+ */
+export function isAppInstalled(app, prefixes) {
+  return new Promise((resolve) => {
+    if (!(app in prefixes)) {
+      return resolve(false);
+    }
+
+    Linking.canOpenURL(prefixes[app])
+      .then((result) => {
+        resolve(!!result);
+      })
+      .catch(() => resolve(false));
+  });
+}
+
+/**
+ * Check if a given app is supported by this library
+ *
+ * @param {string} app
+ * @returns {boolean}
+ */
+function isSupportedApp(app) {
+  return appKeys.includes(app);
+}
+
+/**
+ * Get a list of not supported apps from a given array of apps
+ *
+ * @param {array} apps
+ * @returns {array}
+ */
+function getNotSupportedApps(apps) {
+  return apps.filter((app) => !isSupportedApp(app));
+}
+
+/**
+ * Throws an exception if some of the given apps is not supported
+ *
+ * @param {array} apps
+ */
+export function checkNotSupportedApps(apps) {
+  const notSupportedApps = getNotSupportedApps(apps);
+  if (notSupportedApps.length) {
+    throw new MapsException(
+      `appsWhiteList [${notSupportedApps}] are not supported apps, please provide some of the supported apps [${appKeys}]`,
+    );
+  }
+}
+
+/**
+ * Ask the user to choose one of the available map apps.
+ * @param {{
+ *     title: string | undefined | null
+ *     message: string | undefined | null
+ *     cancelText: string | undefined | null
+ *     appsWhiteList: string[] | null
+ *     prefixes: string[],
+ *     appTitles: object | undefined | null
+ * }} options
+ * @returns {Promise}
+ */
+export function askAppChoice({
+  dialogTitle,
+  dialogMessage,
+  cancelText,
+  appsWhiteList,
+  prefixes,
+  appTitles,
+}) {
+  return new Promise(async (resolve) => {
+    let availableApps = await getAvailableApps(prefixes);
+
+    if (appsWhiteList && appsWhiteList.length) {
+      availableApps = availableApps.filter((appName) =>
+        appsWhiteList.includes(appName),
+      );
+    }
+
+    if (availableApps.length < 2) {
+      return resolve(availableApps[0] || null);
+    }
+
+    if (isIOS) {
+      const options = availableApps.map((app) => appTitles[app]);
+      options.push(cancelText);
+
+      ActionSheetIOS.showActionSheetWithOptions(
+        {
+          title: dialogTitle,
+          message: dialogMessage,
+          options: options,
+          cancelButtonIndex: options.length - 1,
+        },
+        (buttonIndex) => {
+          if (buttonIndex === options.length - 1) {
+            return resolve(null);
+          }
+          return resolve(availableApps[buttonIndex]);
+        },
+      );
+
+      return;
+    }
+
+    const options = availableApps.map((app) => ({
+      text: appTitles[app],
+      onPress: () => resolve(app),
+    }));
+    options.unshift({
+      text: cancelText,
+      onPress: () => resolve(null),
+      style: 'cancel',
+    });
+
+    return Alert.alert(dialogTitle, dialogMessage, options, {
+      cancelable: true,
+      onDismiss: () => resolve(null),
+    });
+  });
+}
+
+/**
+ * Check if options are valid and well passed
+ *
+ * @param {{
+ *     latitude: number | string,
+ *     longitude: number | string,
+ *     sourceLatitude: number | undefined | null,
+ *     sourceLongitude: number | undefined | null,
+ *     googleForceLatLon: boolean | undefined | null,
+ *     googlePlaceId: number | undefined | null,
+ *     title: string | undefined | null,
+ *     app: string | undefined | null
+ *     dialogTitle: string | undefined | null
+ *     dialogMessage: string | undefined | null
+ *     cancelText: string | undefined | null
+ *     naverCallerName: string | undefined
+ * }} options
+ * @param {object} prefixes
+ */
+export function checkOptions(options, prefixes) {
+  if (!options || typeof options !== 'object') {
+    throw new MapsException(
+      'First parameter of `showLocation` should contain object with options.',
+    );
+  }
+  if (!('latitude' in options) || !('longitude' in options)) {
+    throw new MapsException(
+      'First parameter of `showLocation` should contain object with at least keys `latitude` and `longitude`.',
+    );
+  }
+  if (
+    'title' in options &&
+    options.title &&
+    typeof options.title !== 'string'
+  ) {
+    throw new MapsException('Option `title` should be of type `string`.');
+  }
+  if (
+    'googleForceLatLon' in options &&
+    options.googleForceLatLon &&
+    typeof options.googleForceLatLon !== 'boolean'
+  ) {
+    throw new MapsException(
+      'Option `googleForceLatLon` should be of type `boolean`.',
+    );
+  }
+  if (
+    'googlePlaceId' in options &&
+    options.googlePlaceId &&
+    typeof options.googlePlaceId !== 'string'
+  ) {
+    throw new MapsException(
+      'Option `googlePlaceId` should be of type `string`.',
+    );
+  }
+  if ('app' in options && options.app && !(options.app in prefixes)) {
+    throw new MapsException(
+      'Option `app` should be undefined, null, or one of the following: "' +
+        Object.keys(prefixes).join('", "') +
+        '".',
+    );
+  }
+  if ('appsWhiteList' in options && options.appsWhiteList) {
+    checkNotSupportedApps(options.appsWhiteList);
+  }
+  if (
+    'appTitles' in options &&
+    options.appTitles &&
+    typeof options.appTitles !== 'object'
+  ) {
+    throw new MapsException('Option `appTitles` should be of type `object`.');
+  }
+}
+
+class MapsException {
+  constructor(message) {
+    this.message = message;
+    this.name = 'MapsException';
+  }
+}