react-native-map-link 2.7.28 → 2.8.3

package/README.md

@@ -12,26 +12,26 @@ on their device. The app supports Apple Maps, Google Maps, Citymapper, Uber, and
 <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`
+- 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>
 
@@ -188,7 +188,7 @@ You can do so by coping the `<queries>` statement below, and pasting it in the t
 ```
 
 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")
 ```
@@ -204,7 +204,6 @@ More info [here](https://stackoverflow.com/a/67383641/1129689).
 
 </details>
 
-
 ## Usage
 
 Using the `showLocation` function will shown an action sheet on iOS and an alert on Android, without any custom styling:
@@ -225,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.28",
+  "version": "2.8.3",
   "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/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}?sll=${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}`;
+      if (useSourceDestiny || options.directionsMode) {
+        // Use "dir" as this will open up directions
+        url = 'https://www.google.com/maps/dir/?api=1';
+        url += sourceLatLng ? `&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}` : '';
       } 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}`;