How To Implement React Native Deep Linking In Mobile Apps

Deep links, magic links, or universal links are useful in your mobile application. Using it, we can provide a very smooth experience to app users. We can use these links to verify users after login or signup, reset a password, etc.

So using it, we can prevent duplicate or unwanted users from our application. So it can be very useful in our app product development. This article will explain how to implement react native deep linking in your mobile app.

1. First, at the root of your website or server, you need to add a .well-known folder.

2. In that folder, you need to upload 2 files, one for android and the other for iOS.

3. For the iOS platform, you need to upload one file named apple-app-site-association and ensure it does not contain an extension. File data can be like this given below :

{
   "applinks": {
       "apps": [],
       "details": [
           {
               "appID": "55QQP72PTY.com.mb.travelrite.dev",
               "paths": [
                   "*"
               ]
           }
       ]
   }
}

We must maintain the format for appID; otherwise, dynamic links will not work. The format will be your-app-teamid.bundleId. You can choose multiple paths as per your requirement. For example, * will work for all kinds of paths.

Related Read: Deep Linking in React Native Using Firebase Dynamic Links

4. For the android platform, you need to upload a file named assetlinks.json, containing an extension. File data can be like this given below :

[

   {
       "relation": [
           "delegate_permission/common.handle_all_urls"
       ],
       "target": {
           "namespace": "android_app",
           "package_name": "com.mb.travelrite.dev",
           "sha256_cert_fingerprints": [               "FA:C6:17:45:DC:09:03:78:6F:B9:ED:E6:2A:96:2B:39:9F:73:48:F0:BB:6F:89:9B:83:32:66:75:91:03:3B:9C",               "24:1C:DF:AE:46:70:B1:3E:48:0F:74:C9:77:10:12:B8:9F:FC:CA:4B:BD:BC:C1:44:EA:7A:63:AD:F3:EB:FE:DC"
           ]
       }
   }
]

For android package_name, you need to add your app’s package name. You need to add the SHA256 fingerprint of your app’s Keystore. You can get it by this command :

 keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

5. You must set the same package name and bundle id for both platforms; otherwise, it will not work.

6. Now we have to do configuration on the android and iOS native side so we can handle deep incoming links and perform related actions.

7. So first, we will configure the android side. In AndroidManifest.xml, we must add intent filters to the activity that handles deep linking for our app. It will catch the deep links of your domain, and clicking on the link will redirect to our app if installed. The code snippet is given below.

<application
     android:name=".MainApplication"
     android:label="@string/app_name"
     android:icon="@mipmap/ic_launcher"
     android:roundIcon="@mipmap/ic_launcher"
     android:allowBackup="false"
     android:theme="@style/AppTheme">
     <activity
       android:name=".MainActivity"

       android:label="@string/app_name"         android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
       android:launchMode="singleTask"
       android:windowSoftInputMode="adjustResize"
       android:exported="true">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
         <intent-filter android:autoVerify="true">
             <action android:name="android.intent.action.VIEW"/>
             <category android:name="android.intent.category.DEFAULT"/>
             <category android:name="android.intent.category.BROWSABLE"/>
             <data android:scheme="https" android:host="admin.dev.travelrite.org"/>
             <data android:scheme="http" android:host="admin.dev.travelrite.org"/>
         </intent-filter>
     </activity>

8. Now we will do it for the iOS side. Open your project in Xcode and open your app under the TARGETS header. Click the Signing & Capabilities tab. You must ensure your Team is registered and your Provisioning Profile field is completed. Please add the domain you created to the Associated Domains and prefix it with applinks: like the one below.

Related Read: How to Handle Deep Linking in a React Native Ios App?

9. Click the Info tab, and add a URL Type to your project. The Identifier can be called Bundle Id or whatever you wish. Add your bundle identifier to the URL Schemes property like the one below.

10. We have to modify the AppDelegate.m file and add some code related to linking, which handles params from deep linking and will pass to the react-native app. The code snippet is given below.

#import <React/RCTLinkingManager.h>
// ...
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation

{
  return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}

11. Now we will do the coding part on the react-native side through which we can handle incoming deep linking and perform actions based on our requirements. First, we have to add linking listeners to our application, as given below. You can add this in a separate listener file and App.js file.

import React, { useEffect, useState } from 'react';

import { Linking, Text, View } from 'react-native';


useEffect(() => {

       /**
        * When app will in foreground and background mode
        */
       Linking.addEventListener("url", (data) => {
           if (!isEmptyOrNull(data)) {
               handleLink(data?.url)
           }
       })

       /**
        * When app will in killed mode
        */
       Linking.getInitialURL().then((data) => {
           if (!isEmptyOrNull(data)) {
               handleLink(data)
           }
       })

   }, [])

12. You can test the deep linking in a simulator or device by hitting a command like the one below.

iOS:  npx uri-scheme open "https://admin.dev.travelrite.org" --ios
android: npx uri-scheme open "https://admin.dev.travelrite.org" --android

Demo Link : Click here