Expo + react-native-firebase Dynamic Links

In part one of this saga, we looked at migrating from Expo’s web based SDK authentication to app specific authentication. Fun.

Now it’s time to look at something else which is not very well documented, because it’s not something many apps require: Dynamic Links.

What is a dynamic link? Here’s how Firebase explains it:

Dynamic Links are smart URLs that allow you to send existing and potential users to any location within your iOS or Android app. They survive the app install process, so even new users see the content they’re looking for when they open the app for the first time. Dynamic Links are no-cost forever, for any scale.

Resolving dynamic links in a react-native app require some native code, which react-native-firebase already took care of.

So let’s get started integrating this in a managed Expo custom client.

In part one we already set up authentication with react-native-firebase, which means we already set up @react-native-firebase/app as a custom plugin.

There’s excellent documentation regarding the installation of the requires module and some setup instructions on react-native-firebase, so have a look at it first.

The parts that apply to Expo and are handled slightly differently:

In app.json, add custom domains to expo > ios > FirebaseDynamicLinksCustomDomains
which is an array of custom domains.
Add your custom associatedDomains “associatedDomains”: [“applinks:your.domain.com”] under expo > ios

Add an intent filter under

expo: {
  ...
  android: {
  ...
  intentFilters: [
      ...,
      {
        “scheme”: “https”,
        “host”: “your.domain.com”,
        “pathPrefix”: “/”
      }

This should get your app to accept incoming dynamic links via the URL prefix you set up in Firebase console.

You will, of course, need to make sure your URL prefix is set up correctly in your web hosting

You will need to register your Firebase app URI scheme in your iOS info.plist. You will find your app’s URI scheme on Firebase > Project Settings > General > Your apps. Click on your iOS app under Apple apps and look for the Encoded App ID.
However, it is not possible to edit info.plist Expo managed projects because it is not yet there. This file is generated when building the app via EAS build.
So How? by running npx uri-scheme add <Your Encoded App ID>.
Doing this locally: If you build your app locally to test it with expo run:ios — device, then right after it installs cocopods and asks you to select a connected device, run the npx uri-scheme add command.
Doing this when building via EAS to deploy live: To handle this, we will use one of EAS build NPM hooks, namely the eas-build-post-install. This hook runs right after EAS installs cocopods. eas-build-pre-upload-artifacts will not work. To use it, add “eas-build-post-install”: “npx uri-scheme add <Your Encoded App ID>” to your package.json under scripts.

Now that our app listens to incoming dynamic links, we need to do something with those incoming links.
You can use any method for intercepting incoming links, but I use react-navigation, and here’s how I handle it.

We set up react-navigation deep linking as explained in their docs. To handle the incoming links, we will make use of two methods: getInitialURL and subscribe(listener).
We resolve the incoming link data with

dynamicLinks().resolveLink(url).then((resolvedData) => {
  … // Do what you need to do here
}

But note that we will need to listen to both the custom URL you created for the dynamic links (short URL) and the resolved one as well! Why? Because when a user scans/clicks your link and they don’t have the app installed, it will redirect them to the app store where your short URL will be passed back to the app already resolved.

And that’s it. You are now able to subscribe to incoming dynamic links, resolve them, and use the values passed through them in your managed Expo custom client app.