How to implement Universal link & App link in React Native

In this blog, I want to give you a proper understanding of how to implement Universal link & App link in react native.

To get a basic understanding of the deep linking concept please read: What are Deep linking, URL scheme, Universal link & App link?

How to Set Up Universal Link?

1. Upload apple-app-site-association(AASA) file to your web server

Create a folder in your server named .well-known, then create a file with the name apple-app-site-association. This file needs to return the following JSON

Here, the appID is your app’s bundle ID prefixed with your team ID. If you log in you can find it here under Membership. The second property after appID is an array of supported paths. Also, it is possible to add more than one app — for example, if you have multiple bundleIDs per environment. Just add another object to the ‘details’ array.

And needs to be hosted at:

https://your-domain.com/.well-known/apple-app-site-association

Note: You have to make sure that AASA (apple-app-site-association) file is properly uploaded to your server and available under the above link (https is important). If you hosted correctly, the above link will download the file that you hosted.

2. App Configuration

Go to https://developer.apple.com and activate associated domains inside the appID of your project.

Please note, to set up the associated domains option, you’ll need an Apple Developer Account. Otherwise, you won’t be able to set Associated Domains Capability in Xcode.

After that, you can regenerate your provision profile. Then you need to enable “Associated Domains’ in your project settings. To do so, you need to open your project on Xcode and click on your target app. Go to Signing & Capabilities , if Associated Domains is not visible click on + Capability and activate Associated Domains for your app. Once activated fill in the domain of your site with the prefix applinks to tell Xcode that this domain is used for Universal Links.

Here abctest.com is the domain

Now our configs are set up. To handle incoming links on your app you need to add the following lines to your AppDelegate.m file in react-native.

3. React-Native Setup

After you implement everything on the native side, you can handle incoming links. There are two cases.

1. When the app is not open (the app never opens or kills the app)

You can check whether the app launch from the universal link with Linking.getInitialURL()

2. When the app is open (already running in the background)

You can handle these events with Linking.addEventListener('url', callback)

Add this code to the main component of the project, and customize it for your needs:

How to Set Up App Link?

1. Upload assetlinks.json file to your web server

Again, just like for iOS, Create a folder in your server named .well-known, then create a file with the name assetlinks.json. The file in its most basic form should look like this:

Let’s see how to generate this assetlinks.json file,

Open your project in Android Studio, go to Tools > App Links Assistant > Open Digital Asset Links File Generator

Enter details about your site and app to generate a Digital Asset Links file

1. Enter your Site domain and your Application ID.(you can find your application id in the android app level build.gradle file)
2. Specify the signing config or select a keystore file. (Make sure you select the right release config or keystore file for the release build or the debug config or keystore file for the debug build of your app. If you want to set up your production build, use the release config. If you want to test your build, use the debug config.)
3. Click Generate Digital Asset Links file.
4. Once Android Studio generates the file, click Save file to download it.
5. Upload the assetlinks.json file to your site, with read access for everyone, at https://your-domain.com/.well-known/assetlinks.json
6. Click Link and Verify to confirm that you’ve uploaded the correct Digital Asset Links file to the correct location.

IMPORTANT NOTE: If you’re using Play App Signing for your app, then the certificate fingerprint produced by the App Links Assistant (in the above way) usually doesn’t match the one on users’ devices. In this case, you can find the correct Digital Asset Links JSON snippet for your app in your Play Console developer account under Release > Setup > App Integrity.

You can test an existing statement file(assetlinks.json) by using this

2. App Configuration

Android App Links, available on Android 6.0 (API level 23) and higher, are web links that use the HTTP and HTTPS schemes and contain the autoVerify attribute. This attribute allows your app to designate itself as the default handler of a given type of link. So when the user clicks on an Android App Link, your app opens immediately if it's installed.

The following code snippet shows an example of an Android App link intent filter:

The same React Native Setup that we discuss in iOS universal link, applies to the Android App link too.

With this all setup, you should have your Deep Link working as expected. This may seem a complex solution but it is quite straightforward in actual practice.

References:

1. Handling Android App Links: https://developer.android.com/training/app-links
2. Add Android App Links: https://developer.android.com/studio/write/app-link-indexing