React native Linking to another app

Question

I am trying to link to another app from my react native application (google maps for example).

I required the Linking module as it's written here: https://facebook.github.io/react-native/docs/linking.html

My code contains a simple button which should open the navigation app and pass some location as properties:

<TouchableOpacity 
   onPress={ () =>{
     Linking.openURL("http://maps.google.com/maps=daddr=Wien")
     .catch(err => console.error('An error occurred', err)); }}
>
   <Text>Navigate</Text>
</TouchableOpacity>

Upon loading the view I get no errors which implicates that requiring the module worked fine.

Upon taping the button I get the following error message :

undefined is not an object (evaluating '_reactNative.Linking.openURL')

---

I have followed these steps : https://facebook.github.io/react-native/docs/linking-libraries-ios.html and installed npm install link --save <- Maybe the issue is that this is the wrong module?? If it is the wrong one does anyone know how the correct one is called?

Solution

You do not need to npm install link --save or to use the "Linking Libraries in iOS" guide. The "<Linking /> component" and the "Linking librairies action" are two very different things.

<Linking /> is a component that allows you to open links (web urls, or links to other apps) and to detect when your app is called from a link (from a browser or another app, or a push notification for example). It is a core component of React Native and comes with the react-native npm package.

Linking librairies is necessary when you install a third party library (like react-native-maps for example) and you need to add the dependencies to your iOS Xcode and Android Gradle build configurations. It is usually done with the react-native link <package> command, after you npm install it.

The only thing you must do is require or import <Linking /> in your javascript file before using it. You do not even need the whole part about Handling deep links from the documentation. That is only for incoming links that open your app. All you need starts at Opening external links

Now, why your code fails is a mystery. Here is a link to a working app that has the exact same behavior. A concise example would be:

import React from 'react';
import { TouchableOpacity, Linking, Text } from 'react-native';

export default function Button() {
  return (
    <TouchableOpacity onPress={() => Linking.openURL('https://maps.google.com?q=stack+overflow+offices')}>
      <Text>Press me</Text>
    </TouchableOpacity>
  );
}

You can also test it here on rnplay.

I suggest cleaning your project, removing the node_modules folder and doing npm install again, and compiling your project new.

Comments

[Thomas Kekeisen]

To actually start a navigation, use http://maps.apple.com/?daddr=<lat>,<long> for iOS and http://maps.google.com/maps?daddr=<lat>,<long> for Android.

[1984]

That's weird, two different urls?

[Kristoffer]

They also point at two diffent maps. If you want google map the link should be the same...