React Native and Firebase Dynamic Links

What are Dynamic Links?

Firebase Dynamic Links allow you to make a single link that can be handled on all devices, whether a user opens it on a desktop or a mobile phone. In the case of mobile phones, our app doesn't even have to be installed!

When a user opens a link without an app installed, he will be redirected to App Store/Google Play to install it. Our link can still be handled by the app when it is launched for the first time. This greatly increases the accessibility and the number of installs of our app because users can get the app "directly" from a link.

Why do I need it?

Let's say that you want to invite users to install your app with a promo code. You could send promo codes to users, and then they have to copy this code after signing up. It may seem like not much but this is an additional action the user has to take. And the more user has to do along the way, the higher the chance he won't do it at all.

Thanks to Dynamic Links, you can send a promo code in the form of a link. It will allow users to install the app if they don't have it installed and automatically apply the code, so the users only need to sign up. This way, we minimize the effort users have to take and maximize the chance they will install our app!

There are many more use cases like allowing users to share content between them or even deeply integrating your app with your website – the same URL can either open your webpage or open your app. Possibilities are essentially limitless, and they make your app more appealing to the user.

How to get started?

First, we have to create a new project on Firebase or use existing if you already have one. I created a project called "dynamic-links-example". After you create your project and get into the Firebase console, you can find dynamic links under the "Engage" tab on left navigation menu. We can create a new URL prefix for our links by clicking the "Get started" button.

After creating a domain, you should see a page like the one below. I created a domain called exampledomain000.page.link that Google provides. If you have your own domain, you can add it here too.

From this moment, we can create our dynamic links. There are two main ways of creating a dynamic link. You can either create them using the Firebase console by clicking "New Dynamic Link" button or generate them in your application.

Creating your links with the first method is mostly used when you want to share something with your users – a promo code, for example. The second option is used when you want to add custom parameters that can be different with each link. These links won't be visible in your Firebase console.

To create such links, we first need to add a pattern so we will be protected from phishing attacks. To add a pattern click on the dropdown next to the "New Dynamic Link" button and select "Allowlist URL pattern".

I created a pattern that allows all links that look like "https://dynamic-links-example.com/<any-params-here>". Keep in mind that we added ".*" at the end. It allows us to add any params that we want to our links. For more details about how Regular Expressions work, check this link.

Adding Firebase Dynamic Links to our app

After we are done with preparing firebase to handle our links, we can proceed to the next step. Which is adding @react-native-firebase/dynamic-links to our app. I will assume that you already have Firebase configured in your app. If not, please refer to this guide.

First, we need to install a module mentioned above.

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

# if you are using npm
npm install @react-native-firebase/dynamic-links

# if you are developing app for ios
cd ios/ && pod install

Configuring iOS

Before we can start with configuring our iOS app to handle dynamic links, we need to have an Apple Developer account. Then we can create a provisioning profile for our app, and it has to have "Associated Domains" capability.

To check if your provisioning profile has this capability, click on the "i" icon next to your provisioning profile under the "Signing & Capabilities" tab in Xcode and check if there is a capability called "Associated Domains".

When we have this capability in our provisioning profile, we can add it to our app by clicking the "+ Capability" button and selecting the "Associated Domains". Now we should see a new tab where we can add our domain. In our case, it should look like "applinks:exampledomain000.page.link".

At this stage our iOS app is ready to receive dynamic links.

Configuring Android

To make our Android app handle Dynamic Links, we need to add an intent filter inside our MainActivity in the AndroidManifest.xml file.

        <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:host="exampledomain000.page.link" android:scheme="http"/>
            <data android:host="exampledomain000.page.link" android:scheme="https"/>
        </intent-filter>

Generating Dynamic Links

After all this configuration, we are finally ready to generate some links in our app. It is important that our link param is compatible with the URL pattern we made in the Firebase. Otherwise, it will be blocked.

You can use two functions to generate links:

• buildLink() – generates a link where all params are fully visible
• buildShortLink() – generates shortened link where parameters are hidden

Both functions take the same params to build a link. Below there is an example of using buildShortLink().

const generateLink = async (param, value) => {
  const link = await firebase.dynamicLinks().buildShortLink({
    link: `<your_link>/?${param}=${value}`,
    ios: {
      bundleId: <bundle_id>,
      appStoreId: <appstore_id>,
    },
    android: {
      packageName: <package_name>,
    },
    domainUriPrefix: 'https://exampledomain000.page.link',
  });

  return link;
}

Handling Dynamic Links in app

Finally, we are ready to handle dynamic links inside our React Native code. There are two cases when our app can get a dynamic link:

• The app was not running and has been launched by a dynamic link
• The app has been launched in the background and is now moved to the foreground after receiving a dynamic link

To handle the first scenario, we use the getInitialLink() method, which allows us to get a link that has launched our app. We can use this method anywhere in our app, and it will return the same link until the app is restarted or launched from a different link.

import {firebase} from '@react-native-firebase/dynamic-links';

const getAppLaunchLink = async () => {
  try {
    const {url} = await firebase.dynamicLinks().getInitialLink();
    //handle your link here
  } catch {
    //handle errors
  }
};

Second scenario is handled by a listener like this:

import {firebase} from '@react-native-firebase/dynamic-links';

const unsubscribeDynamicLinks = firebase.dynamicLinks().onLink(({url}) => {
  //handle your url here
});

//remember to unsubscribe when you dismiss your component to prevent memory leaks
unsubscribeDynamicLinks();

And that's all! Now you can create, send and properly handle dynamic link with your users. And they can, too. :)

Final notes

Firebase Dynamic Links can add a lot to your app, which helps users interact and share data with others by sharing links more easily. These links preserve data even when they were launched before installing the app.

It also gives you the possibility to integrate with your website to add an option to open the same link on a web browser or app. And all of this with not much work needed.