28

Is it possible to open an external app when touching a button from my react native app? Specifically, i want to open Whatsapp when I touch a button. How can I do this?

Thanks!

hecontreraso
  • 1,221
  • 3
  • 15
  • 23

8 Answers8

33

You have to use React Native Linking API:

Linking.openURL('whatsapp://app')

Also, have a look at How can I integrate WhatsApp into my app

Ihor Burlachenko
  • 4,689
  • 1
  • 26
  • 25
  • 17
    I'm trying this code but got an exception `Possible Unhandled Promise Rejection Error: Could not open URL 'whatsapp://app': No Activity found to handle Intent { act=android.intent.action.VIEW dat=whatsapp://app flg=0x10000000 }` – gcstr Jul 11 '17 at 13:01
  • 1
    I've been looking for this for such a long time: IS there any place in which you can see all the prefixes/slugs for apps? (fb, linkedin, whatsapp) – iuliu.net Nov 16 '17 at 09:42
  • @iuliu.net ...me too..have you found anything in this regards? – Tunvir Rahman Tusher Jan 05 '19 at 04:15
  • Unfortunately still no. – iuliu.net Jan 05 '19 at 09:32
  • Note that this example uses Universal Links which is iOS specific. For Android you can use Android Studio > Build > Analyze APK to view an APK's AndroidManifest.XML file to see the list of Intents. – gmoz22 Aug 20 '19 at 17:14
  • @Sagar : Refer this: https://stackoverflow.com/questions/42536216/how-to-open-an-external-app-from-react-native-app/58952926#58952926 – Aniruddha Shevle Nov 20 '19 at 11:09
  • @Sagar I do not myself, see https://reactnative.dev/docs/linking and https://developer.android.com/training/app-links/deep-linking#handling-intents – gmoz22 Feb 26 '20 at 05:08
  • @iuliu.net here are the schemes for some popular apps https://github.com/redpandatronicsuk/react-native-check-app-install/blob/master/app-list.js – John Harding May 09 '22 at 00:49
7

Previously below was used,

Linking.openURL('whatsapp://app');

But later the URL is changed as follows, we can also add phone and text query params shown below,

Linking.openURL(`whatsapp://send?phone=${whatsappNo}&text=${whatsappMsg}`);
Aniruddha Shevle
  • 4,602
  • 4
  • 22
  • 36
2

You can try to use parameters from the API of the application. For example in my case I had to open maps on IOS and start a navigation from Point A to B. So I checked the documentation from HERE, and used the navigation link: "http://maps.apple.com/?saddr=Cupertino&daddr=San+Francisco" to create the query to open the app:

 <TouchableOpacity onPress={() => Linking.openURL('maps://app?saddr=Cupertino&San+Francisco')}>
        <Text>Navigate</Text>
 </TouchableOpacity>

You can use coordinates too, as lat and long :

maps://app?saddr=Cupertino&S100.123+101.222
Marius
  • 76
  • 1
  • 5
  • for Android? What I should do? – DevAS Jul 09 '19 at 11:01
  • @DevAS For Android you can use Android Studio > Build > Analyze APK to view an APK's AndroidManifest.XML file to see the list of Intents and build your URL accordingly. – gmoz22 Aug 20 '19 at 17:19
2

i wanted to open whatsapp on a click of simple button in my react-native application, which i am developing for android.

I have searched a lot about this but did not got any perfect solution. Although i found one third party library "npm i -S react-native-app-link".

The description in this library is exactly what i wanted to do. But not able to figure it out. If any of you can help it out it will be a great favor for me.

Manish
  • 393
  • 1
  • 5
  • 20
  • Got the solution. Now external app is opening on my react-native android application. Used library 'react-native-app-link' – Manish Aug 23 '19 at 08:19
  • can you please provide some sample I have stuck badly please check https://stackoverflow.com/questions/58856557/how-to-open-other-application-from-my-application – Sagar Nov 15 '19 at 11:27
0

React Native don't have support to 'whatsapp://' scheme.

Only for this Schemes:

  • mailto;
  • tel;
  • sms;
  • http / https;

A altenative is use the Whatsapp Universal links with React Native Linking:

https://wa.me/<number>

https://reactnative.dev/docs/linking.html#open-links-and-deep-links-universal-links

Hevelson Rosario
  • 420
  • 6
  • 11
  • 1
    The answer above from Aniruddha does work. Linking.openURL(`whatsapp://send?phone=${whatsappNo}&text=${whatsappMsg}`); Tried the number with the country code and it did everything other than press the send button on Whatsapp. – unSensei Aug 11 '21 at 05:50
  • 'whatsapp://' scheme works great – Anton Liannoi Jun 19 '22 at 17:31
0

You can use this package https://github.com/khorark/rn-openapp for opening any other app on android phone.

Just that you need to know the app id of the required app. You may get it from play store url of the app (it is present right after ?id ) Example.

Raged19
  • 28
  • 5
Arkadiy
  • 1
  • 1
0

Use this package https://github.com/danilrafiqi/react-native-open-application with this https://github.com/FiberJW/react-native-app-link

so if the application is already installed, open it immediately, but if it is not installed it will go directly to the google play store

const onPresss = () => {
OpenApplication.openApplication('com.dev47apps.droidcam')
  .then(() => {})
  .catch(err => {
    AppLink.maybeOpenURL('droidcam://', {
      appName: 'DroidCam',
      appStoreId: '',
      appStoreLocale: '',
      playStoreId: 'com.dev47apps.droidcam',
    })
      .then(() => {})
      .catch(err => {});
  });
};
Rahmad Al Habib
  • 300
  • 4
  • 7
0

resolve this error as follows:

export async function openAppSpecific(urlScheme = 'https://wa.me/', storeURL = 'https://play.google.com/store/apps/details?id=com.whatsapp') {
  const url = urlScheme;

  try {
    const supported = await Linking.canOpenURL(url);
    if (supported) {
      await Linking.openURL(url);
    } else {
      const storeUrl = storeURL;
      await Linking.openURL(storeUrl);
    }
  } catch (error) {
    toast.failedCustom("Erro ao abrir o aplicativo :(");
  }
}

it is always necessary to pass a scheme url, it is as if it were a single link of the application that you want to open. As an example I used whatsapp.

Carlos Henrique
  • 1