Linking not working

[Chandra-react]

I'm using react-native 0.63.3 version. Linking.canOpenURL("whatsapp://send?text=hello") not working.

if we try to open the above url its shows package is not install even though it is installed this issue is only in android 30

[franznkemaka]

Solution 👉 https://github.com/facebook/react-native/issues/30909#issuecomment-787901526

I just try to reproduce the issue but it was working perfectly.

Attempt to reproduce

Create a default React Native app from scratch npx react-native init example

Update package.json to your current version

-"react-native": "0.63.4"
+"react-native": "0.63.3"

Open Android SDK Google Pixel 2 with WhatsApp installed.

Start app yarn start

Conclusion

The issue is not related to React Native directly as you can see. It is related to Android SDK 30 update. Checkout solution above

Best regards!

[Chandra-react]

Hello @chandrashekarioolabs.

I just try to reproduce the issue but it was working perfectly.

Attempt to reproduce

Create a default React Native app from scratch npx react-native init example

Update package.json to your current version

-"react-native": "0.63.4"
+"react-native": "0.63.3"

Open Android SDK Google Pixel 2 with WhatsApp installed.

Start app yarn start

Conclusion

The issue is not related to React Native directly as you can see. So please send us a link to a repo/ steps to reproduce.

Best regards!

please try this part of code Linking.openURL("whatsapp://send?text=hello") in android 11.

expected result it should open the what's app,

[franznkemaka]

Exactly @chandrashekarioolabs I tested this using the following Android Simulator:

Pixel 2 API 30
Android 11.0 (Google Play)

[Chandra-react]

Exactly @chandrashekarioolabs I tested this using the following Android Simulator:

Pixel 2 API 30
Android 11.0 (Google Play)

Linking. canOpenURL("whatsapp://send?text=hello")

sorry can test this method once. I think openURL is working fine but before that if we try to check whether the app is installed or not using the above line of code then its returning false

[franznkemaka]

Hi @chandrashekarioolabs

I just tried

if(Linking.canOpenURL("whatsapp://send?text=hello")){
     console.log("WhatsApp is installed and should work!")
}

And it works perfectly.

I think what you should do is to create a repo/something with Expo Snack that can reproduce the issue. Unless it won't be easy to find out the real issue.

Have you tried running this on a real device with WhatsApp installed?

[Chandra-react]

Hi @chandrashekarioolabs

I just tried

if(Linking.canOpenURL("whatsapp://send?text=hello")){
     console.log("WhatsApp is installed and should work!")
}

And it works perfectly.

I think what you should do is to create a repo/something with Expo Snack that can reproduce the issue. Unless it won't be easy to find out the real issue.

Have you tried running this on a real device with WhatsApp installed?

thanks franznkemaka for your reply. onWhatsPress= async ()=>{ const res = await Linking.canOpenURL("whatsapp://send?text=hello") if(res){ console.log("WhatsApp is installed and should work!") }else{ console.log("not working") } }

please check this part of code

[Chandra-react]

Hi @chandrashekarioolabs I just tried

if(Linking.canOpenURL("whatsapp://send?text=hello")){
     console.log("WhatsApp is installed and should work!")
}

And it works perfectly. I think what you should do is to create a repo/something with Expo Snack that can reproduce the issue. Unless it won't be easy to find out the real issue. Have you tried running this on a real device with WhatsApp installed?

thanks franznkemaka for your reply. onWhatsPress= async ()=>{ const res = await Linking.canOpenURL("whatsapp://send?text=hello") if(res){ console.log("WhatsApp is installed and should work!") }else{ console.log("not working") } }

please check this part of code in android 11 and 10 u will face the issue which I mentioned above

[franznkemaka]

Hi @chandrashekarioolabs

I'm keen to know how you finally solved this!

[Chandra-react]

this issue still exit.

[franznkemaka]

ok I will test it async and let you know

[franznkemaka]

Works only on Android SDK < 30

HI @chandrashekarioolabs

I just tested what you suggested and it works perfectly fine.

Here are some suggestions to fix this issue ASAP!

1. Try to create a repo here on GitHub where you can reproduce the issue. If you can't reproduce the issue then it would be difficult for the collaborators of RN to find it either.

2. Try to run your app on a real device and find out if it works or not

3. Share your build.gradle & app/build.gradle to find out how your app is configured

Step 1 is very important!

Hope it helps!

[ausshadu]

For me,

Linking.canOpenURL(url) is returning false for all tel: and mailto: urls.

Android 11 ReactNative: 0.63.4

[tankers746]

This is to do with the new package visibility rules in Android 11. You'll need to add <queries> to your AndroidManifest.xml

https://medium.com/androiddevelopers/package-visibility-in-android-11-cc857f221cd9

[franznkemaka]

@chandrashekarioolabs @ausshadu What are you guys android/build.gradle ?

[franznkemaka]

Hello @chandrashekarioolabs @ausshadu,

I just checked it on Android SDK 30 and it doesn't work. You guys didn't specify that.

So the issue is related to Android SDK 30

[franznkemaka]

Solution

Add the following in your android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.example">

    <uses-permission android:name="android.permission.INTERNET" />

+    <queries>
+     <package android:name="com.whatsapp" />
+   </queries>

...

@tankers746 is of course right!

Hope it works. @chandrashekarioolabs @ausshadu can you check it out?

[geraintwhite]

This appears to be related to a new requirement when targeting Android SDK 30 - fixable by https://developer.android.com/training/basics/intents/package-visibility-use-cases#check-browser-available

https://github.com/facebook/react-native/pull/31263

[pushkar8723]

I also faced the same issue. However, found an alternative for WhatsApp. Instead of using whatsapp:// URL, I used web URL https://wa.me/?text=<url encoded text>. In this case, user is prompted to select Whatsapp / Chrome to open the URL. However, even if the user selects Chrome, he is automatically redirected to WhatsApp (if WhatsApp is installed on the device) or is asked to download Whatsapp.

[kylanhurt]

For the record I had this issue when upgrading from API 29 to 30. I fixed it by using the following values in android/build.gradle:

    ext {
        buildToolsVersion = "30.0.2"
        minSdkVersion = 21
        compileSdkVersion = 30
        targetSdkVersion = 30
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.4")
        classpath('com.google.gms:google-services:4.3.8')
        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }

Then adding the following clause to `android/app/src/main/AndroidManifest.xml`, as mentioned in an earlier comment:
```
<queries>
  <package android:name="com.mydomain.myapp" />
</queries>
```

As a Javascript developer this sort of stuff is confusing but I'm happy to be past the issue.

[Waqas-Jani]

I'm facing same issue for mailto and tel in android 11 (30). for whatsapp i added
"

" in AndroidManifest.xml file, and whatsapp working. how does tel and mailto working for andorid 11 (30)?

[Waqas-Jani]

@franznkemaka what are the queries for tel and mailto in AndroidManifest.xml ?

[Waqas-Jani]

i found solution for tel and mailto for android 11 add this in AndroidManifest.xml file between "queries" tags package android:name="com.google.android.gm" package android:name="com.google.android.dialer" package write in tag

working for gmail and google dailer app.

[veraldo]

i found solution for tel and mailto for android 11 add this in AndroidManifest.xml file between "queries" tags package android:name="com.google.android.gm" package android:name="com.google.android.dialer" package write in tag

working for gmail and google dailer app.

Btw in order to avoid having to specify the email and dial apps, you can declare the intents instead:

<queries>
      <intent>
        <action android:name="android.intent.action.SENDTO" />
        <data android:scheme="mailto" />
      </intent>
      <intent>
        <action android:name="android.intent.action.DIAL" />
      </intent>
</queries>

[TatianaMatumoto]

If someone can't insert this solution because after that android doesn't compile anymore:

Solution

Add the following in your android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.example">

    <uses-permission android:name="android.permission.INTERNET" />

+    <queries>
+     <package android:name="com.whatsapp" />
+   </queries>

...

@tankers746 is of course right!

Hope it works. @chandrashekarioolabs @ausshadu can you check it out?

Try upgrading gradle like this: https://stackoverflow.com/a/67820136 Just upgrading gradle i made that queries work. i hope i saved you a few hours and stress in debugging 🥰

[iway1]

here's an expo config plugin that does what @veraldo mentioned:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { withAndroidManifest } = require('@expo/config-plugins')

function addIntentToQuery({ mod, intent }) {
  const r = { ...mod }
  if (!r.modResults.manifest.queries) {
    r.modResults.manifest.queries = [
      {
        intent: [],
      },
    ]
  } else if (!r.modResults.manifest.queries[0].intent?.[0]) {
    r.modResults.manifest.queries[0].intent = []
  }

  r.modResults.manifest.queries[0].intent.push({
    action: [
      {
        $: {
          'android:name': intent.actionName,
        },
      },
    ],
    ...(intent.dataScheme && {
      data: [
        {
          $: { 'android:scheme': intent.dataScheme },
        },
      ],
    }),
  })
  return r
}

const withAndroidMailPhoneQueries = (config) => {
  const r = withAndroidManifest(config, (mod) => {
    let modified = addIntentToQuery({
      mod,
      intent: {
        actionName: 'android.intent.action.SENDTO',
        dataScheme: 'mailto',
      },
    })
    modified = addIntentToQuery({
      mod,
      intent: {
        actionName: 'android.intent.action.DIAL',
      },
    })
    return modified
  })
  return r
}

module.exports = withAndroidMailPhoneQueries

then add in your app.json or app.config.js:

  plugins: ['./config-plugins/withAndroidMailPhoneQueries']

[saddamhussaints392]

Modify this file android/app/src/main/AndroidManifest.xml file

<manifest ...>
    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https"/>
        </intent>
    </queries>
</manifest>

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[AnshIcode]

hi @pushkar8723 @geraintwhite @kylanhurt @ausshadu @iway1 I am using the react native version 0.71.3 and android v 14.0 , i am using Linking.openURL to open the terms and privacy policy in my app in android but it not working in android 14 but working fine in android v 11. any suggestions?? how can i fix it? if anyone can help me out this? Thnks.