Setup React Native Deep Linking for connecting link to your app (Android)

Photo by Farzad on Unsplash

Deep linking is a technique used in mobile app development that allows developers to link directly to a specific page or content within an app. This means that users can easily navigate to the desired page or content within the app from an external link, rather than having to navigate through the app’s menus to find it.

Deep linking is becoming increasingly important as more and more users access content through mobile apps. By making it easy for users to find the content they are looking for, deep linking can help increase user engagement and retention.

To set up deep linking in your mobile app, you will need to create a Digital Asset Links JSON file. This file specifies the relationship between your app and your website, and provides the information necessary for deep linking to work properly. Here’s an example of how to do this using Next.js:

• Create a new directory “.well-known” in the public folder of your Next.js project.
• Create a new file “assetlinks.json” inside the .well-known directory, add the following code:

{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.example.app",
    "sha256_cert_fingerprints": ["your app's certificate fingerprint"]
  }
}

Replace com.example.app with the package name of your app, and replace your app's certificate fingerprint with the SHA-256 fingerprint of your app's signing certificate.

• Add the following configuration to the “next.config.js” :

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: "/.well-known/assetlinks.json",
        destination: "/api/assetlinks",
      },
    ];
  },
};
module.exports = nextConfig;

• Create an API handler at pages/api/assetlinks.ts to serve the assetlinks.json file. An example code for this API handler is as follows:

import type { NextApiRequest, NextApiResponse } from "next";export default function handler(
  req: NextApiRequest,
  res: NextApiResponse
): void {
  res.status(200).json({
    relation: ["delegate_permission/common.handle_all_urls"],
    target: {
      namespace: "android_app",
      package_name: "com.example.app",
      sha256_cert_fingerprints: ["your app's certificate fingerprint"],
    },
  });
}

• Deploy your app to your hosting provider.
• Run your Next.js server and check if the “.well-known/assetlinks.json” file is available at the URL https://<your-domain>/.well-known/assetlinks.json.

Once you have created your Digital Asset Links JSON file, the next step is to set up deep linking in your Android app. This involves configuring your app’s intent filters to recognize the URLs that you want to deep link into your app. You will need to configure your AndroidManifest.xml file to handle deep links. To do this, you will need to add an <intent-filter> element to the activity you want to deep link to. Here's an example:

<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" />
  <data android:host="yourdomain.com" />
</intent-filter>

To configure deep linking in React Navigation, you need to first set up the navigation stack for your app. This involves creating a stack navigator that defines the screens in your app and their relationships to each other. Once you have your navigation stack set up, you can add deep linking support by configuring your app’s URL scheme and setting up the linking options in your navigation stack. here is an example of how to configure deep linking in React Navigation:

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {

    const linking = {
      prefixes: [prefix],
      config: {
        screens: {
          Home: 'home',
          Detail: {
            path: 'detail/:id',
            parse: {
              id: (id: string) => `${id}`,
            },
          },
        },
      },
    };

  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

To ensure that the configuration set up for the Android app is working properly, I am using an actual Android device for testing. Of course, you can also opt to use an Android emulator if that’s more convenient. Just remember to close the example app first if it’s already running before proceeding with the testing phase.

If you using an Android emulator run this command:

adb shell am start -W -a android.intent.action.VIEW -d https://yourdomain.com/detail/1

# OR use uri-scheme package to test
npx uri-scheme open https://yourdomain.com/detail/1 --android

Deep linking is a mobile app development technique that allows developers to link directly to specific content within an app from external links. By making it easier for users to find the content they are looking for, deep linking can increase user engagement and retention. To set up deep linking, you need to create a Digital Asset Links JSON file that specifies the relationship between your app and your website. Then, you need to configure your Android app’s intent filters to recognize the URLs that you want to deep link to. In React Navigation, you can add deep linking support by configuring your app’s URL scheme and linking options in your navigation stack. To test the deep linking configuration, you can use an actual Android device or an Android emulator and run a command or use a package like URI-scheme.