Deep Linking in React Native

what is deep linking in a mobile application?

In general, websites have different routes for different pages. For example, if you consider the official site of react-native https://reactnative.dev. But if you want to go to the guides page, you have to go to the home page and select guides from the navigation bar or you can directly go to that page if you hit this URL https://reactnative.dev/docs/getting-started.

so here /docs/getting-started is the route that takes to the guides page. similarly /docs/components-and-apis will take you to the API reference page.

Deep linking in a mobile application is exactly the same, when you want to go to a specific screen we have a deep link URL for mobile applications also. Both Android and IOS support deep linking.

Different scenarios where the deep link is used

• Scenario 1: In this scenario, website and mobile applications will have the same URL. so, the URL takes you to the same section on the website and app.
• Scenario 2: In this scenario, only for some features, mobile and website support deep links.
• Scenario 3: In this scenario, only mobile applications have deep links and the website doesn’t support the same URL.

Deep Linking on Android

We are going to see scenario 1, how to implement that in react native android. This is a bare react native project, not the expo project.

react-native init deepLink

For testing, we are going to use code sandbox .

First, create a react project in code sandbox and install react-router-dom for navigation.

Now create 3 routes Home, Users, UserDetails.

• Home screen is the default home page.
• Users screen will have a list of users(pulled for JSON-placeholder API).
• UserDetail screen will take an id param and get only that particular Id from JSON-placeholder API.

We are going to create exact same 3 screens for mobile also.

• install react-navigation for navigation in the react-native project.
• create a stack navigator with three screens Home, User, and UserDetails. Wrap this stack with Navigation Container.

Users.js

UserDetails.js

Home.js

Now that we are ready with the screens, go to android/app/src/main/AndroidManifest.xml file and add another intent-filter under main activity.

<activity
    android:name=".MainActivity"
    android:launchMode="singleTask">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    // add this 
    <intent-filter>
        <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="v9z8x.csb.app"/>
    </intent-filter>
</activity>

Here scheme is https and the domain is v9z8x.csb.app (this is code sandbox react domain). This means accepting deep links only with this scheme and domain only. In the same way, we can also make multiple schemes.

This is the link for code sandbox, create your own or else go to the link.

react-navigation supports deep linking, for that, we need to pass the linking prop to <NavigationContainer />.

the linking object should be configured according to our screen structure.

const linking = {
      prefixes:["https://v9z8x.csb.app/"],
      config:{
         screens: {
            Home:'home',
            Users: 'users',
            UserDetails:'user/:id'
         }
     }
}

In the linking object, prefixes are an array that contains all schemes which are used for deep linking. currently, we configured only one scheme. if you have multiple add all of them into the array.

next config contains screens, here we configure all of our screens. the key-value pair inside screens objects indicate the screen and its route path. For example, Users is Screen name and users is route path. That means whenever there is a user in the deep link URL it means we are configuring it to go to that user screen. For example, https://v9z8x.csb.app/users will go to the Users screen directly.

react-navigation automatically detects deep links and redirects to that specific screen. But if you want to keep track of deep link URLs you can do that with Linking imported from react-native , check this official documentation.

save all files and npm run android

Meanwhile, open the code sandbox and create a new react project. This project is only for redirects either to an app or chrome only. check this sandbox

Now we will test the application, each time you click the URL a pop asks you to select the application to open with. In the video below I have opened with application and chrome to show the same screens.

Deep Linking on IOS

IOS also supports deep linking, with some additional configuration than Android.

go to ios/'yourAppName'/AppDelegate.m file and add below code

// Add the header at the top of the file:
#import <React/RCTLinkingManager.h>
// Add this above `@end`:
- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
 restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
 return [RCTLinkingManager application:application
                  continueUserActivity:userActivity
                    restorationHandler:restorationHandler];
}

Whenever we want to use your website domain with ios deep linking, Apple wants to confirm that it’s you who owns that domain. For that, we need to create a route with a path /apple-app-site-association or /.well-known/apple-app-site-association which servers a JSON object with the app ID

{
 "applinks":{
     "apps":[],
     "details":[
         {
          "appID":"TSTQ36Q2SQ.com.branch.sdk.TestBed",
          "paths":['*']
         }
     ]
  }

}

Here we can link multiple apps, appID is a combination of your team ID and bundle ID. you can find both on the apple developer portal in bundle ID details.

After that configuration, deep link works the same as above android.

This configuration is only needed when you want your website URL as a deep link scheme. If you don’t need that URL, you can use your own scheme like if the app name is deep link. you can use the same deeplink://home . For this kind of scheme, you don’t need any verification, you can directly use them.

References :

React Navigation linking: https://reactnavigation.org/docs/deep-linking/

React linking: https://reactnative.dev/docs/linking

IOS domain verification: https://blog.branch.io/how-to-setup-universal-links-to-deep-link-on-apple-ios/