Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Linking in react native can open just one app

Tags:

react-native

UPDATE 1

I removed return from code and now links work on IOS. But on android I can't open any app. Any idea?

I am trying to open different apps from my app.

return Linking.openURL(“twitter://“);
return Linking.openURL(“instagram://“);

But it doesn’t work. I configured IOS by documentation. On android doesn’t work too. While...

return Linking.openURL(“tripadvisor://“);

Work just fine. Any idea why I can’t open other apps.
This is code that I am using (open app if installed or open store with it but sometimes even store doesn't open) what I did wrong:

let appUrl = "instagram://";
Linking.canOpenURL(appUrl).then(supported => {
            if (!supported) {
              Alert.alert("",
                "",
                [
                  {text: "go to store", onPress: this.openStorePress},
                  {text: "cancel", onPress: () => { }, style: 'cancel'},
                ],
                { cancelable: false }
              );
            } else {
              return Linking.openURL(appUrl);
            }
        }).catch(err => {
            console.error(err);
        });
like image 659
1110 Avatar asked Oct 13 '18 16:10

1110


People also ask

What is linking in React Native?

Linking gives you a general interface to interact with both incoming and outgoing app links. Every Link (URL) has a URL Scheme, some websites are prefixed with https:// or http:// and the http is the URL Scheme.

How does React Native handle deep linking?

There are two ways to handle Deep Linking in a React Native app: Without navigation: by invoking React Native's core library via JavaScript and directly calling Linking . You can learn more about this in React Native's official documentation. With navigation: by configuring React Navigation library.

How do I link a project in React Native?

1) Go to your project's home dir using cmd. 2) run npm install 3) Thereafter run rnpm link or react-native link 4) see ios folder in your project folder and if you find any pod file then run pod install after navigating into ios folder in cmd.


2 Answers

You have to find the rights URL schemes. Have look at my code

Instagram

Linking.openURL('instagram://user?username=apple')
  .catch(() => {
    Linking.openURL('https://www.instagram.com/apple');
  })

Twitter

Linking.openURL('twitter://user?screen_name=apple')
  .catch(() => {
    Linking.openURL('https://www.twitter.com/apple');
  })

Facebook

Linking.openURL('fb://page/PAGE_ID');
Linking.openURL('http://instagram.com/_u/USER_NAME');
Linking.openURL('http://instagram.com/_p/PICTURE');
like image 158
Akshay I Avatar answered Oct 20 '22 23:10

Akshay I


Your code looks pretty solid, here's an example of how I open twitter in my app.

const twitterUrlScheme = `twitter://user?screen_name=${twitterUsername}`;

Linking.canOpenURL(twitterUrlScheme)
    .then((supported) =>
        Linking.openURL(
            supported
                ? twitterUrlScheme
                : `https://www.twitter.com/${twitterUsername}`
            )
        )
        .catch((err) => console.error('An error occurred', err));

I think perhaps your issue might be the return Linking.openUrl, I'm not sure you need the return in that statement. Does it work if you remove the return? Otherwise, it might help to move your Alert outside of the then-block from canOpenUrl.

like image 28
Jason Gaare Avatar answered Oct 20 '22 23:10

Jason Gaare