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

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:

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.