Extending Deep Linking in the app

In this tutorial, you will learn how to extend the “Deep Linking” functionality in your app. Deep Linking allows the app to interpret URL links and redirect the user to the relevant native screens within the app.

BuddyBoss App is only capable of opening web links as native screens if a link type is registered on the plugin side. Otherwise, the link will open in an in-app browser that loads the page in a webview. 

Many web links are registered already in the app, like someone’s profile, forums and courses. These registered web links will open as native screens in the app.

Make sure to also read our tutorial for extending Deep Linking from the plugin.

If you have a new URL type that you want to support, for example you have “http://mysite.com/job” and you would like to open some custom screen “Job” that you have created (view tutorial on how to create new screens). The assumption here is that the “Job” screen is made and registered as a route in the Main navigator, meaning you already have code like this somewhere in your index.js:

// index.js
externalCodeSetup.navigationApi.addNavigationRoute(
		"JobScreen",
		"JobScreen",
		JobScreenComponent,
		"Main"
	);

First, you have to provide deep linking support for this URL in the plugin (view tutorial on adding deep linking from the plugin). The explanation here is that the app will make an API request to the site to ask about this link and as a response it will get the data necessary for the navigation and showing the “Job” screen in the app.

Next, you will use the deeplinksApi.setDeeplinksReturnValueFilter hook to handle the case when the deep linking functionality fails to match your URL. You will pass a function (of type DeeplinksWithoutEmbeddedCallback ) to this hook, similar to the function below:

// index.js
import React from "react";
import {NativeModules} from "react-native";
import {BlockTypes} from "@src/services/types/blocks";
import {NavigationActions} from "react-navigation";
import JobScreenComponent from "./components/JobScreenComponent";
const {RNCustomCode} = NativeModules;

export const applyCustomCode = externalCodeSetup => {
	// call custom code api here

	...

      externalCodeSetup.navigationApi.addNavigationRoute(
		"JobScreen",
		"JobScreen",
		JobScreenComponent,
		"Main"
	);

	externalCodeSetup.deeplinksApi.setDeeplinksReturnValueFilter(
		(defaultReturnValue, linkObject, navigation) => {
			navigation.dispatch(
				NavigationActions.navigate({
					routeName: "JobScreen",
					params: {
                                  job: linkObject._embedded.jobs[0] 
  					}
				})
			)

                  return true;
		}
	);
};

As we can see the function has three arguments:

1. defaultReturnValue – the boolean value that would be returned if we have not intercepted it. In this case, it would be “false” since the URL doesn’t match with anything known to the app.
2. linkObject – object given by the deeplink API that can contain some important information for navigating to the screen, or representation of the screen. In the example provided above, it’s the “job” object.
3. navigation – is the navigation property from “react-navigation” that is used for navigation (see https://reactnavigation.org/docs/navigation-prop/)

The function has to return boolean, in particular, the “true” value as a sign of successful interception, otherwise the app will open the link in the webview.