CODEWITHSUNDEEP
expodeep-linkingreact-native-navigationios-universal-links
Ahmed Afifi
Ahmed Afifi

Reputation: 456

React Native Expo / Deep Linking / Universal Link

I am building app using react native, Expo SDK - 41 & react-native-navigation - v5 that serves items to the users

How can I create links to be shared between users through social media apps like "WhatsApp" or "Facebook" as messages

For Example:

I found this item on "App Name". Take a look, https://myApp/itemId

When the user press the link it will open the app on specific screen to show that item (if the app installed on the receiver device), Otherwise will open the App store (Android or IOS) depend on the device to download and install the app.

And is there is any tutorial that explain the whole implementation for this feature ?

Upvotes: 6

Views: 4490

Answers (1)

MKSquadizzle
MKSquadizzle

Reputation: 91

Here are the steps I used in our app:

For the steps below let's assume you own a domain https://example.com and you want to redirect all clicks on https://example.com/your-path/ to:

  • redirect to the app/play store if the app is not installed
  • opened in the browser if on a desktop device
  • open the app on iOS/Android if app is installed

Steps to achieve that:

  1. You need a domain (e.g. https://example.com)
  2. Registering Universal Links on iOS:
    You have to prove to Apple that you own this domain by providing an Apple App Site Association (AASA) file from your web server.
    Detailed explanation: https://docs.expo.dev/guides/linking/#universal-links-on-ios. Note: No server-sided configuration needed for Android
  3. After that you need to configure the domains (you specified in the AASA) in your expo app.json file (See: https://docs.expo.dev/guides/linking/#expo-configuration)
    Note: The Expo docs don't show any example so I'll share one:
"expo": {
    "name": "MyApp",
     ...,
       "ios": {
        ...,
      "associatedDomains": [
        "applinks:example.com"
      ]
    },
    "android": {
      ...,
      "intentFilters": [
        {
          "action": "VIEW",
          "autoVerify": true,
          "data": [
            {
              "scheme": "https",
              "host": "*.example.net",
              "pathPrefix": "/your-path"
            }
          ],
          "category": [
            "BROWSABLE",
            "DEFAULT"
          ]
        }
      ]
    }
  }
}
  1. Result of the steps above: if you click a link like https://example.com/your-path/ (or any subdomain of that e.g. https://example.com/your-path/your-second-path?hello=world ...),
    you should be redirected to the app on iOS/Android if the apps are installed.
    However if the app is not installed a browser widow opens https://example.com/your-path/
  2. Redirecting to app stores:
    You have to configure the subdomain .../your-path in a way to check which device is trying to open it when loading the site and redirect to the app store/play store - url if it is an iOS/Android device resp.
    Example: in our case the domain leads to a React web app and on loading the page ( on componentDidMount ) I check User's device using navigator.userAgent
    This will of course differ from framework to framework.
    Here you can also choose what to show or where to redirect if the link is clicked on a desktop device.
  3. Handle links in your iOS/Android app:
    Now in Expo you need to install expo-linking via expo install expo-linkingand set a listener to handle URL links in the desired component:
import * as Linking from 'expo-linking';

componentDidMount() {
 this.grabLinkOpeningApp()
 this.setLinkListenerWhenOpeningApp()
}

grabLinkOpeningApp() {
  //Handles link when the link is clicked and the app was already open
  Linking.addEventListener('url',this.handleUrl)
}

setLinkListenerWhenOpeningApp() {
  //Handles link when app is closed:
  Linking.getInitialURL()
  .then(url => this.handleUrl(url))
  .catch(err => this.handleError(err))
}


handleUrl(url) {
  //Handle your link here
}

Note: Best to use the code in a component that is opened before the actual screen components. In this case you can catch the link no matter if the user is registered or not and like that it can "survive" the registration process.
7. Create a link and share it from your app:
You can add arbitrarily many query params to the link, i.e. .../you-path/key1=value1/key2=value2.... So you can create links within your app using data however you need it for your specific use case.
If you want to share the link via the typical share dialog where the user can choose the app you he wants to share the link with (i.e. Whatsapp, Facebook, Instagram, etc.), you can either import {Share} from 'react-native' or import * as Sharing from 'expo-sharing' (see resp. expo docs, this part is very straight forward following the docs)

In the end, sorry for the long text, but I hope it explains the steps involved well.

Upvotes: 9

Related Questions