react-native-map-link 2.9.4 → 2.10.2

package/README.md

@@ -214,26 +214,26 @@ More info [here](https://stackoverflow.com/a/67383641/1129689).
 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'
+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'
-})
+  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:
@@ -241,6 +241,52 @@ Notes:
 - 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.
 
+### Or
+
+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<void>;
+};
+```
+
+```tsx
+import {getApps, GetAppResult} from 'react-native-map-link';
+
+const Demo = () => {
+  const [availableApps, setAvailableApps] = useState<GetAppResult[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const result = await getApps({
+        latitude: 38.8976763,
+        longitude: -77.0387185,
+        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)
+      });
+      setAvailableApps(result);
+    })();
+  }, []);
+
+  return (
+    <React.Fragment>
+      {availableApps.map(({icon, name, id, open}) => (
+        <Pressable key={id} onPress={open}>
+          <Image source={icon} />
+          <Text>{name}</Text>
+        </Pressable>
+      ))}
+    </React.Fragment>
+  );
+};
+```
+
 ## More information
 
 - [Using this library with Expo](docs/expo.md)

package/index.d.ts

@@ -1,21 +1,64 @@
 import * as React from 'react';
-import {ViewStyle, StyleProp, ImageStyle, TextStyle} from 'react-native';
+import {
+  ViewStyle,
+  StyleProp,
+  ImageStyle,
+  TextStyle,
+  ImageSourcePropType,
+} from 'react-native';
 
-interface Options {
+/** id for map application. this is the id that is passed to the `app` option */
+export type MapId =
+  | 'apple-maps'
+  | 'google-maps'
+  | 'citymapper'
+  | 'uber'
+  | 'lyft'
+  | 'transit'
+  | 'truckmap'
+  | 'waze'
+  | 'yandex'
+  | 'moovit'
+  | 'yandex-maps'
+  | 'yandex-taxi'
+  | 'kakaomap'
+  | 'mapycz'
+  | 'maps-me'
+  | 'osmand'
+  | 'gett'
+  | 'navermap'
+  | 'dgis'
+  | 'liftago'
+  | 'petalmaps';
+
+/** options shared across different types */
+interface SharedOptions {
+  /** optionally you can set which apps to show (default: will show all supported apps installed on device) */
+  appsWhiteList?: MapId[];
+  /** custom titles to display for each app instead of using default titles. */
+  appTitles?: Partial<Record<MapId, string>>;
+}
+
+interface Options extends SharedOptions {
   latitude: number | string;
   longitude: number | string;
+  /** optionally specify starting location for directions */
   sourceLatitude?: number;
+  /** not optional if `sourceLatitude` is specified */
   sourceLongitude?: number;
+  /** optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false) */
   alwaysIncludeGoogle?: boolean;
   googleForceLatLon?: boolean;
   googlePlaceId?: string;
   title?: string;
-  app?: string;
+  /** optionally specify specific app to use */
+  app?: MapId;
+  /** optional (default: 'Open in Maps') */
   dialogTitle?: string;
+  /** optional (default: 'What app would you like to use?') */
   dialogMessage?: string;
   cancelText?: string;
-  appsWhiteList?: string[];
-  appTitles?: {[key: string]: string};
+  /** to link into Naver Map You should provide your appname which is the bundle ID in iOS and applicationId in android. */
   naverCallerName?: string;
   directionsMode?: 'car' | 'walk' | 'public-transport' | 'bike';
 }
@@ -34,22 +77,50 @@ interface PopupStyleProp {
   activityIndicatorContainer?: StyleProp<ViewStyle>;
 }
 
-interface PopupProps {
+interface PopupProps extends SharedOptions {
   isVisible: boolean;
   showHeader?: boolean;
   customHeader?: React.ReactNode;
   customFooter?: React.ReactNode;
   onCancelPressed: () => void;
   onBackButtonPressed: () => void;
-  onAppPressed: () => void;
+  onAppPressed: (appName: MapId) => void;
   style?: PopupStyleProp;
   modalProps?: object;
   options: Options;
-  appsWhiteList?: string[];
-  appTitles?: {[key: string]: string};
 }
 
+/**
+ * Link users to their desired map app.
+ *
+ * If an `app` option is passed, it will directly link to that map app,
+ * else it will prompt user to select map app.
+ *
+ * Prompts via `ActionSheetIOS` on iOS & `Alert.alert` on Android.
+ *
+ * If these prompts don't meet your UI use case, checkout the `Popup` component,
+ * or use the `getApps` function to build a custom UI.
+ */
 export function showLocation(
   options: Options,
 ): Promise<string | undefined | null>;
+
+export type GetAppResult = {
+  id: MapId;
+  name: string;
+  icon: ImageSourcePropType;
+  /** function to link user to map app */
+  open: () => Promise<void>;
+};
+
+/**
+ * Get array of map apps on users device.
+ *
+ * Useful for building custom UIs.
+ */
+export function getApps(options: Options): Promise<GetAppResult[]>;
+
+/**
+ * A styled popup component that displays icons in the app list
+ */
 export class Popup extends React.Component<PopupProps> {}

package/index.js

@@ -2,10 +2,7 @@
  * React Native Map Link
  */
 
-import Popup from './src/components/Popup'
-import { showLocation } from './src'
+import Popup from './src/components/Popup';
+import {showLocation, getApps} from './src';
 
-export {
-  showLocation,
-  Popup
-}
+export {showLocation, getApps, Popup};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-map-link",
-  "version": "2.9.4",
+  "version": "2.10.2",
   "description": "Open the map app of the user's choice with a specific location",
   "main": "index.js",
   "repository": {

package/src/index.js

@@ -4,8 +4,13 @@
 
 import {Linking} from 'react-native';
 
-import {generatePrefixes, generateTitles, isIOS} from './constants';
-import {askAppChoice, checkOptions} from './utils';
+import {generatePrefixes, generateTitles, isIOS, icons} from './constants';
+import {
+  askAppChoice,
+  checkOptions,
+  getAvailableApps,
+  checkNotSupportedApps,
+} from './utils';
 
 /**
  * Open a maps app, or let the user choose what app to open, with the given location.
@@ -299,3 +304,28 @@ export async function showLocation(options) {
     return Linking.openURL(url).then(() => Promise.resolve(app));
   }
 }
+
+export async function getApps(options) {
+  let apps = await getAvailableApps(generatePrefixes(options));
+  if ('appsWhiteList' in options && options.appsWhiteList.length) {
+    checkNotSupportedApps(options.appsWhiteList);
+    apps = apps.filter((appName) => options.appsWhiteList.includes(appName));
+  }
+
+  const titles = generateTitles(options.appTitles);
+  async function open(app) {
+    return showLocation({...options, app});
+  }
+
+  let list = [];
+  for (const app of apps) {
+    list.push({
+      id: app,
+      name: titles[app],
+      icon: icons[app],
+      open: open.bind(this, app),
+    });
+  }
+
+  return list;
+}

package/src/utils.js

@@ -11,15 +11,35 @@ import {appKeys, isIOS} from './constants';
  */
 export const getAvailableApps = async (prefixes) => {
   const availableApps = [];
+  const promises = [];
+
   for (const app in prefixes) {
     if (prefixes.hasOwnProperty(app)) {
-      const avail = await isAppInstalled(app, prefixes);
-      if (avail) {
-        availableApps.push(app);
-      }
+      promises.push(
+        new Promise(async (resolve) => {
+          try {
+            const isInstalled = await isAppInstalled(app, prefixes);
+
+            resolve({
+              app,
+              isInstalled,
+            });
+          } catch (error) {
+            resolve({
+              app,
+              isInstalled: false,
+            });
+          }
+        }),
+      );
     }
   }
 
+  const results = await Promise.all(promises);
+  results.forEach(
+    ({isInstalled, app}) => isInstalled && availableApps.push(app),
+  );
+
   return availableApps;
 };