This is documentation for Stream Chat React Native SDK v5, which is nolonger actively maintained. For up-to-date documentation, see the latest version (v6).

Deep Linking

This guide talks about deep linking into a simple chat application or a generic application directly. It also focuses on getting the channel id or similar entity through a Deep link URL and thereby use it to initiate the chat.

Step 1 - Native Setup

Prerequisites before following this guide is having an application with our Stream Video SDK integrated. You can follow our tutorials for the same to get started with an application.

For instructions on how to add support for deep linking on Android we will primarily follow this guide.

Creating Intent Filters

To create a link to your app content, add an intent filter that contains these elements and attribute values in your AndroidManifest.xml file at /android/app/src/main/AndroidManifest.xml.

  • action - Specify the ACTION_VIEW intent action so that the intent filter can be reached from Google Search.
<action android:name="android.intent.action.VIEW" />
  • data - Add one or more <data> tags, each of which represents a URI format that resolves to the activity. At minimum, the <data> tag must include the android:scheme attribute.
<data android:scheme="http" />
<data android:scheme="https" />
<!-- The URL here must exclude the scheme -->
<data android:host="`YOUR URL HERE`" />
  • category - Include the DEFAULT and the BROWSABLE category. It is required in order for the intent filter to be accessible from a web browser. Without it, clicking a link in a browser cannot resolve to your app.
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />

Combined together your intent filter should look like:

<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="http" />
    <data android:scheme="https" />
    <!-- Example: "stream-calls-dogfood.vercel.app” -->
    <data android:host="`YOUR URL HERE`" />
</intent-filter>

An Android App Link is a special type of deep link that allows your website URLs to immediately open the corresponding content in your Android app, without requiring the user to select the app. Android App Links use the Digital Asset Links API to establish trust that your app has been approved by the website to automatically open links for that domain. If the system successfully verifies that you own the URLs, the system automatically routes those URL intents to your app.

To verify that you own both your app and the website URLs, complete the following steps:

  • Add intent filters that contain the autoVerify attribute(as we have done in our example above). This attribute signals to the system that it should verify whether your app belongs to the URL domains used in your intent filters.

  • Declare the association between your website and your intent filters by hosting a Digital Asset Links JSON file at the following location:

https://domain.name/.well-known/assetlinks.json

You can use this tool to generate the assetlink.json for your web project. Enter the Hosting site name, App package name and App package fingerprint(SHA256) to generate it.

  • Hosting site name is the URL of the website which we will use for deep linking in our app.
  • App package name can be easily found in the first line of your MainActivity.java file as a value to package.
  • To get your App package fingerprint(SHA256) follow this guide.

Step 2 - Using the Linking API

After the configuration on Android and iOS, we will finally use the Linking API from the React Native to set up handling the link and using it to navigate in the app.

If the app is not already open, it is opened and the URL is passed in as the initialURL.

You can handle these events with getInitialURL() - it returns a Promise that resolves to the URL if there is one.

We then will parse the URL and set our actions accordingly.

If the app is already open, the app is foregrounded, and a Linking url event is fired. You can handle these events with addEventListener('url', callback)- it calls callback({url}) with the linked URL.

An example of both is shared below:

App.tsx 
const App = () => {
  useEffect(() => {
    const parseAndSetChannelID = (url: string | null) => {
      const matchResponse = url?.match(`YOUR REGEX HERE`); // To match the paths and handle them accordingly
      if (matchResponse?.length) {
        // Your custom setup here.
      }
    };
    const { remove } = Linking.addEventListener("url", ({ url }) => {
      parseAndSetChannelID(url);
    });
    const configure = async () => {
      const url = await Linking.getInitialURL();
      parseAndSetChannelID(url);
    };
    configure();
    return remove;
  }, []);
};

You can extract the channel ID if its in the URL, start the conversation using the channel ID and navigate to appropriate screen once you have the URL as shown in the example above or choose to perform any other action.

Previous
Performance
Next
Migration from 4.x to 5.x
© Getstream.io, Inc. All Rights Reserved.