DOCSEARCHbyAlgolia
Submit Docs

react-native-map-link

repository·master·Indexed 21 days ago

https://github.com/tschoffelen/react-native-map-link

A React Native library to open a specific location in a map application of the user's choice. It automatically detects supported installed apps such as Google Maps, Apple Maps, Uber, and Waze. The library provides the `showLocation` function for triggering map selection dialogs and the `getApps` function for retrieving available map applications to build custom UIs.

Tokens
8.7K
Snippets
20
Records
32
Agent score
73%

What's inside react-native-map-link

  1. Configure iOS Info.plist for app detection

    master

    To allow the library to detect installed map applications on iOS, you must add the LSApplicationQueriesSchemes key to your ios/{my-project}/Info.plist. This specifies the URL schemes the app is allowed to interact with. Omitting these may prevent the library from detecting certain installed maps apps.

    <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>tmap</string>
    <string>szn-mapy</string>
    <string>mapsme</string>
    <string>osmandmaps</string>
    <string>gett</string>
    <string>nmap</string>
    <string>dgis</string>
    <string>lftgpas</string>
    <string>sygic</string>
    <string>dashtagmaps</string>
    <string>truckerpath</string>
</array>

  2. Rebuild your Expo app after configuration changes

    master

    After adding the plugin or modifying native configurations, you must rebuild your app for the changes to take effect. For Expo, this is typically done via expo build.

    Important Requirements:

    • Android: Verify that your AndroidManifest.xml has been updated to include the necessary <queries> for intent handling (e.g., geo and waze schemes).
    • Standalone Apps: This library only works when running a standalone app. It will not work when running the app through the Expo Go app from the App Store.
    <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.app">
  <queries>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <data android:scheme="geo" />
    </intent>
    <intent>
      <action android:name="android.intent.action.VIEW" />
      <data android:scheme="waze" />
    </intent>
  </queries>
  <!-- Rest of Manifest -->
</manifest>

  3. Step 1: Add constants for a new app

    master

    Update src/constants.js to define the new app's identity and detection mechanism:

    1. Identify the app: Choose a lowercase alphanumeric key (dashes allowed), e.g., google-maps.
    2. Define detection: Add the app's URL scheme to the prefixes variable. This scheme is used to check if the app is installed on the device.
    3. Define display name: Add the app's English title to the title variable.

  5. Configure react-native-map-link for Expo Managed Workflow

    master

    To use react-native-map-link in an Expo Managed Workflow, you must add the library to your app's configuration file (app.json, app.config.js, or app.config.ts) as a plugin. This ensures the necessary native configurations are applied during the prebuild process.

    {
  "plugins": ["react-native-map-link"]
}

  6. Add support for new maps apps

    master

    To extend the library with support for a new maps or directions application, you must implement its URL scheme. This involves updating constants, adding an icon, implementing the opening logic, and updating documentation.

    General Guideline: Submit only one new app integration per pull request.

  7. Configure AndroidManifest.xml for Android 11+ (Package Visibility)

    master

    For apps targeting Android 11 (SDK 30) or higher, you must update AndroidManifest.xml to include a <queries> block. This allows the library to query other installed apps for map and navigation services. Paste the <queries> block inside the top-level <manifest> tag.

    If you encounter an 'unexpected element <queries> found in <manifest>' error, ensure your Gradle version in android/build.gradle is updated (e.g., classpath("com.android.tools.build:gradle:3.5.4")).

    <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="tmap" />
  </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>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="petalmaps" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="com.sygic.aura" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="truckerpath" />
  </intent>
</queries>

  8. Configure react-native-map-link for Expo Bare Workflow

    master

    If you are using the Expo Bare Workflow, you must follow the standard React Native post-installation steps for each platform:

    • iOS: Follow the specific iOS post-install directions provided in the main repository documentation.
    • Android: Follow the specific Android post-install directions provided in the main repository documentation.

  9. Step 2: Add an icon for a new app

    master

    To provide a visual representation for the new app:

    1. Create a 150x150 pixel icon.
    2. Name the icon file using the same key you defined in src/constants.js (e.g., google-maps.png).
    3. Place the icon in the src/images directory.
    4. Add the corresponding reference to the icons object in src/constants.js.

  11. Step 4: Update documentation and iOS configuration

    master

    Finalize the integration by updating the project documentation:

    1. README.md: Add the new app to the list of supported apps at the top of the file.
    2. iOS Configuration: If the new app uses a specific URL scheme, ensure it is added to the LSApplicationQueriesSchemes section in the README to guide users on necessary iOS project configuration.

  12. Use showLocation() to open a map

    master

    Import showLocation from react-native-map-link to open a location in a map app of the user's choice. You must provide the latitude, longitude, and an optional title.

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

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