View react-native-map-link on Snyk Open Source Advisor

Package Health Score

80 / 100

security
No known security issues
popularity
Recognized
maintenance
Healthy
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
3.6.1	\|	09/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
3.5.0	\|	06/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.11.4	\|	01/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.1.3	\|	05/2018		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.0.7	\|	03/2018		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Recognized

Weekly Downloads (19,033)

GitHub Stars: 692
Forks: 142
Contributors: 60

Direct Usage Popularity

The npm package react-native-map-link receives a total of 19,033 downloads a week. As such, we scored react-native-map-link popularity level to be Recognized.

Based on project statistics from the GitHub repository for the npm package react-native-map-link, we found that it has been starred 692 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 60
Funding: Yes

With more than 10 contributors for the react-native-map-link repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like react-native-map-link is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 1
Open PR: 0
Last Release: 4 months ago
Last Commit: 1 month ago

Further analysis of the maintenance status of react-native-map-link based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that react-native-map-link demonstrates a positive version release cadence with at least one new version released in the past 12 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 7 years
Dependencies: 0 Direct
Versions: 98
Install Size: 292 kB
Dist-tags: 1
# of Files: 49
Maintainers: 2
TS Typings: No

react-native-map-link has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Not sure how to use react-native-map-link?

To help you get started, we've collected the most common ways that react-native-map-link is being used within popular public projects.

tschoffelen / react-native-map-link / example / App.js View on Github

        <button> showLocation(options)} title='Show in Maps using action sheet'/&gt;
        </button><button> { this.setState({ isVisible: true }) }} title='Show in Maps using Popup'/&gt;</button>

View more ways to use react-native-map-link

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.

Full list of 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
TMAP - tmap
Mapy.cz – mapycz
Maps.me – maps-me
OsmAnd - osmand
Gett - gett
Naver Map - navermap
2GIS - dgis
Liftago - liftago
Petal Maps - petalmaps (Android only)
Sygic - sygic

Example screenshot

Installation

1. Install the package

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:

iOS – Update Info.plist

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.

LSApplicationQueriesSchemes

    comgooglemaps
    citymapper
    uber
    lyft
    transit
    truckmap
    waze
    yandexnavi
    moovit
    yandextaxi
    yandexmaps
    kakaomap
    tmap
    szn-mapy
    mapsme
    osmandmaps
    gett
    nmap
    dgis
    lftgpas
    sygic

Using Expo? Read the instructions to make it work on iOS.

Android – Update AndroidManifest.xml

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 security feature. We'll have to update our AndroidManifest.xml to explicitly allow querying for other apps.

You can do so by coping the `` statement below, and pasting it in the top level of your AndroidManifest (i.e. within the ...).


  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
    
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>
  
    
    <data>
  </data>

If you're running into a 'unexpected element found in' error, make sure you have an updated version of Gradle in your android/build.gradle file:

classpath("com.android.tools.build:gradle:3.5.4")

More info here.

Expo – Update app.json

Read the instructions here

Simple example

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

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

Full usage

Using the showLocation function will shown an action sheet on iOS and an alert on Android, without any custom styling:

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, // required 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'
});

Alternatively you can specify the address field and leave the latitude and longitude properties as empty strings

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

showLocation({
  address: '1600 Pennsylvania Avenue NW, Washington, DC 20500', // Required if replacing latitude and longitude
  app: 'comgooglemaps',  // optionally specify specific app to use
});

Notes:

The sourceLatitude / sourceLongitude options only work if you specify both. Currently supports all apps except Waze.
directionsMode works on google-maps, apple-maps and sygic (on apple-maps, bike mode will not work, while on sygic, only walk and car will work). Without setting it, the app will decide based on its own settings.
If you set directionsMode but do not set sourceLatitude and sourceLongitude, google-maps and apple-maps will still enter directions mode, and use the current location as starting point.
If you want to query an address instead of passing the latitude and longitude fields, you can do this by leaving those fields off and provide a full address to be queried with the address field. Just be aware that not all applications support this.

Or

Using the getApps function will return an array (GetAppResult[]) with the apps available on the smartphone:

type GetAppResult = {
  id: string;
  name: string;
  icon: NodeRequire;
  open: () =&gt; Promise;
};

import {getApps, GetAppResult} from 'react-native-map-link';

const Demo = () =&gt; {
  const [availableApps, setAvailableApps] = useState([]);

  useEffect(() =&gt; {
    (async () =&gt; {
      const result = await getApps({
        latitude: 38.8976763,
        longitude: -77.0387185,
        address: '1600 Pennsylvania Avenue NW, Washington, DC 20500', // optional 
        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 (
    
      {availableApps.map(({icon, name, id, open}) =&gt; (
        
          <img>
          
        
      ))}
    
  );
};

More information

Get professional support for this package →
_{Custom consulting sessions available for implementation support or feature development.}

FAQs

What is react-native-map-link?

Open the map app of the user's choice with a specific location. Visit Snyk Advisor to see a full health score report for react-native-map-link, including popularity, security, maintenance & community analysis.

Is react-native-map-link popular?

The npm package react-native-map-link receives a total of 19,033 weekly downloads. As such, react-native-map-link popularity was classified as a recognized. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is react-native-map-link well maintained?

We found that react-native-map-link demonstrated a healthy version release cadence and project activity. It has a community of 60 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is react-native-map-link safe to use?

The npm package react-native-map-link was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 21 December-2024, at 03:52 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

react-native-map-link

Open the map app of the user's choice with a specific location. For more information about how to use this package see README

Ensure you're using the healthiest npm packages

Package Health Score

Explore Similar Packages

Security

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Popularity

Weekly Downloads (19,033)

Direct Usage Popularity

Community

Embed Package Health Score Badge

Maintenance

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Package

Not sure how to use react-native-map-link?

Installation

1. Install the package

2. Post-install steps

Simple example

Full usage

Or

More information

react-native-map-link development dependencies

FAQs

What is react-native-map-link?

Is react-native-map-link popular?

Is react-native-map-link well maintained?

Is react-native-map-link safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Fix identified vulnerabilities

Monitor for new issues

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (19,033)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Not sure how to use react-native-map-link?

Installation

1. Install the package

2. Post-install steps

Simple example

Full usage

Or

More information

react-native-map-link development dependencies

FAQs

What is react-native-map-link?

Is react-native-map-link popular?

Is react-native-map-link well maintained?

Is react-native-map-link safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues