Dynamic Links in React Native (Android)

Dynamic links are links that work the way you want, on multiple platforms (Android, iOS, and even Desktop), and whether or not your app is already installed. On a broad scale, Dynamic links are used to navigate the user to a particular screen in the app and provide the same behaviour across platforms. But there are many more uses of Dynamic links like marketing campaigns, advertisements, referring other users, etc.

Earlier, we used to have deep links to fulfil this purpose. But there were problems with deep links like:

• Different behavior on iOS and Android
• The links don’t work if the app is not installed
• App installed from play store/app store but the deep link data was lost in the installation process, and more …

To overcome these problems and provide users with a much richer app experience, Firebase Dynamic Links were introduced.

Let’s get started!

1. Create a project on Firebase
2. From the left pane, expand the Engage section and click on Dynamic Links.

3. Install the following libraries to enable using dynamic links

yarn add @react-native-firebase/app @react-native-firebase/dynamic-links

OR

npm i @react-native-firebase/app @react-native-firebase/dynamic-links

4. Create your custom dynamic link and add the configurations to open the. link in the browser or Playstore. After creating the link, it would look something like this

5. Test your URL registration by going to the following location in your browser (your-domain is the custom domain name you set)

[your-domain]/.well-known/assetlinks.json

The response will have a target object containing a package_name which ought to have your app’s package name. Please do not proceed until you see this.
Note: It may take a while to register.

Android Setup

1. Create a SHA-256 fingerprint. Navigate to the {project-name}/android/app and run this command

keytool -list -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android

2. Add the SHA-256 fingerprint to firebase, if not already added while creating the project

3. Add an intent-filter to AndroidManifest.xml so that it can listen to dynamic links and store data if the app is not installed/updated from the play store.

<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:host="example.com"
  android:scheme="https"/>
</intent-filter>

Now we’re back to react native

6. Now test your dynamic link by entering the URL in Chrome on your debugger/testing device where the app is installed

7. Listening for dynamic links and navigating to the appropriate screen. The module provides two methods for reacting to events related to the application in the foreground and background/quit.

Let’s dive into some code now.
Dynamic link handling is usually handled in App.js and we also needed a reference to our navigator to perform navigation.

We’ll first create a NavigationService.js

import { CommonActions } from '@react-navigation/native';

let _navigator;

const setTopLevelNavigator = (navigationRef) => {
  _navigator = navigationRef;
}

const navigate = (path, params = {}) => {
  _navigator.dispatch(
    CommonActions.navigate({
      name: path,
      params,
    }),
  );
};

export { setTopLevelNavigator, navigate };

Create a constant file which will have the screen names.

export const SCREENS = {
  HOME: "Home",
  OFFERS: "Offers",
  PROMOTIONS: "Promotions",
};

Let’s create a tab navigator now, this function renders the bottom tabs. The rest of the tab navigation setup is boilerplate.

const renderTabNavigation = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarIcon: ({ focused, color, size }) =>
          renderTabIcon(route, focused, color, size),
        tabBarActiveTintColor: “#0564d4”,
        tabBarInactiveTintColor: "gray",
      })}
    >
      <Tab.Screen name={SCREENS.HOME} component={HomeScreen} />
      <Tab.Screen name={SCREENS.OFFERS} component={OffersScreen} />
      <Tab.Screen name={SCREENS.PROMOTIONS} component={PromotionsScreen} />
    </Tab.Navigator>
  );
};

Returning to App.js, we will now add our dynamic link listeners.

import "react-native-gesture-handler";
import React from "react";
import dynamicLinks from "@react-native-firebase/dynamic-links";

import Navigation from "./src/navigation";
import { SCREENS } from "./src/shared/constants";
import { navigate } from "./src/navigation/NavigationService";

const App = () => {

  const handleDynamicLinks = (data = { url: "" }) => {
    // based on the URL, navigate to appropriate screen
    const linkInLowerCase = data?.url.toLowerCase();
    if (linkInLowerCase.includes("promotions")) {
      navigate(SCREENS.PROMOTIONS);
    } else if (linkInLowerCase.includes("offers")) {
      navigate(SCREENS.OFFERS);
    }
  };

  // App is in background state
  React.useEffect(() => {
    dynamicLinks().getInitialLink().then(handleDynamicLinks);
  }, []);

  // App is in foreground state
  React.useEffect(() => {
    const unsubscribe = dynamicLinks().onLink(handleDynamicLinks);
    // When the component unmounts, remove the listener
    return unsubscribe;
  }, []);

  return <Navigation />;
};

export default App;

That’s it, we’re ready. Fasten your seat belts, time for demo now!

I’ve created these two links.

Open these links in any browser, and you’ll be redirected to the correct screen in the app.

Happy Coding!