Jump to top
Icon

Dynamic Links

Installation and getting started with Dynamic Links.

Installation

This module requires that the @react-native-firebase/app module is already setup and installed. To install the "app" module, view the Getting Started documentation.

# Install & setup the app module
yarn add @react-native-firebase/app

# Install the dynamic-links module
yarn add @react-native-firebase/dynamic-links

# If you're developing your app using iOS, run this command
cd ios/ && pod install

If you're using an older version of React Native without autolinking support, or wish to integrate into an existing project, you can follow the manual installation steps for iOS and Android.

What does it do

Dynamic Links are links that work the way you want, on either iOS or Android and whether or not your app is already installed.

With Dynamic Links, your users get the best available experience for the platform they open your link on. If a user opens a Dynamic Link on iOS or Android, they can be taken directly to the linked content in your app.

Usage

Firebase Setup

  • Open the Dynamic Links tab and configure a new domain for your app. In this test example, I've created one for https://rnfbtestapplication.page.link.

Firebase console dynamic link first step
Firebase console dynamic link first step

  • Create a dynamic link with your domain in the Firebase console. The freshly created dynamic link URL will appear in the table.

Firebase console dynamic link second step
Firebase console dynamic link second step

iOS Setup

To setup Dynamic Links on iOS, it is a prerequisite that you have an Apple developer account setup.

  • Add an App Store ID & Team ID to your app in your Firebase console. If you do not have an App Store ID yet, you can put any number in here for now. Your Team ID can be found in your Apple developer console.

iOS dynamic link first step
iOS dynamic link first step

  • Test the domain you created in your Firebase console (first step in Firebase Setup). Go to the following location in your browser [your domain]/apple-app-site-association. The response will have a details array property containing an object that has the property appID. That will be your app's app ID (It may take some time for your domain to register). Please ensure it is registered before proceeding.

  • Once you're sure your domain is registered, you need to head over to your Apple developer console and create a provisioning profile for your app. Please ensure you've enabled the Associated Domain capability which you should check before proceeding.

iOS dynamic link third step
iOS dynamic link third step

  • Open your project in Xcode and open your app under the TARGETS header. Click the Signing & Capabilities tab. You will need to ensure your Team is registered, and your Provisioning Profile field is completed. Please add the domain you created in your Firebase console to the Associated Domains and prefix with applinks:

iOS dynamic link fourth step
iOS dynamic link fourth step

  • Click the Info tab, and add a URL Type to your project. The Identifier can be called Bundle Id or whatever you wish. Add your bundle identifier to the URL Schemes property.

iOS dynamic link fifth step
iOS dynamic link fifth step

iOS Testing Your Dynamic Link

To test your dynamic link, you will need to use a real device as it will not work on a simulator.

Application Is Installed On Device

The iOS Notes app is a good place to paste your dynamic link and test it opens your app. It should work even if it is not a published app.

Application Is Not Installed On Device

  • Switch the App Store ID in your Firebase Console project settings to a valid App Store ID e.g. iOS Notes App Store ID.

  • Generate a new dynamic link and associate with your app.

  • Paste the link in iOS Notes app. When you press, it should take you to the App Store for the ID you listed in your project settings. Just by making it to the App Store is good enough to indicate your dynamic link is working.

iOS Troubleshooting

  • Ensure you have the right URL in the Associated Domains in Xcode.

iOS troubleshooting first step
iOS troubleshooting first step

  • Ensure you have input the correct Team ID in the Firebase console.

iOS troubleshooting second step
iOS troubleshooting second step

  • Paste your link into the iOS Notes app. Long press the link which will open the menu and ensure you click "Open in [YOUR APP NAME]". Be sure not to press "Open in Safari" as that will disable that dynamic link domain for your device.

iOS troubleshooting third step
iOS troubleshooting third step

  • Ensure your dynamic link domain has an Apple app site association file for your app. Check in the browser by going to the following address: [your domain]/apple-app-site-association

iOS troubleshooting fourth step
iOS troubleshooting fourth step

  • There is a known bug that you can follow here that stops Apple from downloading the app site association file. The work around is to uninstall your app, restart your device and reinstall your app.

Android Setup

  • Create a SHA-256 fingerprint using these instructions for your app, and add to your app in your Firebase console.

android dynamic link first step
android dynamic link first step

  • Test the domain you created in your Firebase console (first step in Firebase Setup). Go to the following location in your browser [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, it may take a while to register.

  • Test the dynamic link works via your emulator by pasting it into in a text message, notepad or email, and checking that it does open your application (ensure the app is installed on the emulator).

Create a Link

You can create dynamic links via the Firebase console, your app or even your custom API. Please refer to Firebase create dynamic link documentation for further details. Below, we will show how to build links as part of your application code:

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

async function buildLink() {
  const link = await dynamicLinks().buildLink({
    link: 'https://invertase.io',
    // domainUriPrefix is created in your Firebase console
    domainUriPrefix: 'https://xyz.page.link',
    // optional set up which updates Firebase analytics campaign
    // "banner". This also needs setting up before hand
    analytics: {
      campaign: 'banner',
    },
  });

  return link;
}

Listening for Dynamic Links

The module provides two methods for reacting to events related to the application in the foreground & background/quit.

Foreground events

When the app is in the foreground (visible on the device), you can use the onLink method to subscribe to events as and when they happen:

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

function App() {
  const handleDynamicLink = link => {
    // Handle dynamic link inside your own application
    if (link.url === 'https://invertase.io/offer') {
      // ...navigate to your offers screen
    }
  };

  useEffect(() => {
    const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
    // When the is component unmounted, remove the listener
    return () => unsubscribe();
  }, []);

  return null;
}

Background/Quit events

If the application is in a background state / has fully quit then the getInitialLink method can be used to detect whether the application was opened via a link:

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

function App() {
  useEffect(() => {
    dynamicLinks()
      .getInitialLink()
      .then(link => {
        if (link.url === 'https://invertase.io/offer') {
          // ...set initial route as offers screen
        }
      });
  }, []);

  return null;
}