react-native-map-link 2.7.26 → 2.8.1

package/README.md

@@ -7,29 +7,33 @@
 ---
 
 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.
-
-Currently 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`
-* Mapy.cz – `mapycz`
-* Maps.me – `maps-me`
-* OsmAnd - `osmand`
-* Gett - `gett`
-* Naver Map - `navermap`
-* 2GIS - `dgis`
+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
 
@@ -39,7 +43,13 @@ Currently supported apps:
 npm i -S react-native-map-link         # or yarn add react-native-map-link
 ```
 
-### 2. Update your Info.plist
+### 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.
@@ -65,12 +75,134 @@ Just add this in your `Info.plist` depending on which apps you'd like to support
     <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
 
@@ -92,19 +224,34 @@ showLocation({
     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
+    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.
-
+- The `sourceLatitude/sourceLongitude` options only work if you specify both. Currently supports all apps except Waze.
+- `directionsMode` works on google-maps and apple-maps (on the latter, `bike` mode will not work). Without setting it, 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)
+- [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

@@ -1,52 +1,55 @@
 import * as React from 'react';
-import { ViewStyle, StyleProp, ImageStyle, TextStyle } from 'react-native';
+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
+  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>
+  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 }
+  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>{ }
+export function showLocation(
+  options: Options,
+): Promise<string | undefined | null>;
+export class Popup extends React.Component<PopupProps> {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-map-link",
-  "version": "2.7.26",
+  "version": "2.8.1",
   "description": "Open the map app of the user's choice with a specific location",
   "main": "index.js",
   "repository": {
@@ -43,7 +43,7 @@
     "eslint": "^6.5.1",
     "jest": "^25.1.0",
     "metro-react-native-babel-preset": "^0.61.0",
-    "react-native": "^0.63.4"
+    "react-native": "^0.64.1"
   },
   "jest": {
     "preset": "react-native",

package/src/constants.js

@@ -27,6 +27,7 @@ export function generatePrefixes(options) {
     gett: 'gett://',
     navermap: options.naverCallerName ? 'nmap://' : 'nmap-disabled://',
     dgis: 'dgis://2gis.ru/',
+    liftago: 'lftgpas://',
   };
 }
 
@@ -57,6 +58,7 @@ export function generateTitles(titles) {
     gett: 'Gett',
     navermap: 'Naver Map',
     dgis: '2GIS',
+    liftago: 'Liftago',
     ...(titles || {}),
   };
 }
@@ -81,6 +83,7 @@ export const icons = {
   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

@@ -17,7 +17,7 @@ import {askAppChoice, checkOptions} from './utils';
  *     sourceLongitude: number | undefined | null,
  *     alwaysIncludeGoogle: boolean | undefined | null,
  *     googleForceLatLon: boolean | undefined | null,
- *     googlePlaceId: number | undefined | null,
+ *     googlePlaceId: number | string | undefined | null,
  *     title: string | undefined | null,
  *     app: string | undefined | null
  *     dialogTitle: string | undefined | null
@@ -26,6 +26,7 @@ import {askAppChoice, checkOptions} from './utils';
  *     appsWhiteList: array | undefined | null
  *     appTitles: object | undefined | null
  *     naverCallerName: string | undefined
+ *     directionsMode: 'car' | 'walk' | 'public-transport' | 'bike' | undefined
  * }} options
  */
 export async function showLocation(options) {
@@ -80,29 +81,83 @@ export async function showLocation(options) {
 
   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) {
+      if (useSourceDestiny || options.directionsMode) {
+        // Use "dir" as this will open up directions
+        url = 'https://www.google.com/maps/dir/?api=1';
         url += `&origin=${sourceLatLng}`;
-      }
-      if (!options.googleForceLatLon && title) {
-        url += `&destination=${encodedTitle}`;
+        if (!options.googleForceLatLon && title) {
+          url += `&destination=${encodedTitle}`;
+        } else {
+          url += `&destination=${latlng}`;
+        }
+
+        url += options.googlePlaceId
+          ? `&destination_place_id=${options.googlePlaceId}`
+          : '';
+
+        url += googleDirectionMode ? `&travelmode=${googleDirectionMode}` : '';
       } else {
-        url += `&destination=${latlng}`;
+        // Use "search" as this will open up a single marker
+        url = 'https://www.google.com/maps/search/?api=1';
+
+        if (!options.googleForceLatLon && title) {
+          url += `&query=${encodedTitle}`;
+        } else {
+          url += `&query=${latlng}`;
+        }
+
+        url += options.googlePlaceId
+          ? `&query_place_id=${options.googlePlaceId}`
+          : '';
       }
-
-      url += options.googlePlaceId
-        ? `&destination_place_id=${options.googlePlaceId}`
-        : '';
       break;
     case 'citymapper':
       url = `${prefixes.citymapper}directions?endcoord=${latlng}`;
@@ -219,6 +274,18 @@ export async function showLocation(options) {
       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) {