Working with React Navigation V5, Firebase Cloud Messaging, and Firebase Dynamic Links

Part 2: Setting Up Dynamic Links to talk to React Navigation

By Daniel Friyia, Agile Software Engineer, TribalScale

In the last part of this series we completed the initial groundwork for React Navigation and enabled basic deep linking to work on iOS and Android. In this section we are going to take a look into how we set up the libraries for Dynamic Links and finish up by opening a deep link from the Notes app. If you missed Part 1, you’ll need to complete that part before starting this one. Ready for Part 3? Check it out now!

Setting up Dynamic Links

The first thing you will want to do here is to set up a Firebase project. You can start by clicking the create project link found here on Firebase:

After creating the project go through the steps Firebase gives you and add your Google Services files to their respective projects in Android and iOS. Once you’ve completed that you need to configure Dynamic Links itself. To do this you can go into the engage section of Firebase. It should look something like this:

Next click create domain and choose a domain for your project. This domain will be important later for your domain config.

Connect Firebase and React-Native

In order to connect Dynamic Links and Firebase we next need to add the RNFirebase library to the project. To do this we are going to run the following commands:

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

The instructions for setting up Firebase iOS and Android to talk to each other are very short and well documented on the RNFirebase website. You can follow their instructions verbatim below. Note that for iOS you are required to have an Apple Developer account for this to work!

iOS Setup: https://rnfirebase.io/dynamic-links/usage#ios-setup

Android Setup: https://rnfirebase.io/dynamic-links/usage#android-setup

Connecting Firebase Dynamic Links with React Navigation

Here is the moment we’ve all been waiting for, where we finally connect Dynamic Links and React-Navigation! The first thing we need to do is import Dynamic Links in our file containing the linking configuration.

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

Next we will want to handle links that come in when the app is closed. In order to do this we’ll need to modify our getInitialURL function. We will add the Firebase getInitialLink function and use it to return the link we require:

const dynamicLinkUrl = await dynamicLinks().getInitialLink()
if(dynamicLinkUrl) {
  return dynamicLinkUrl.url
}

Finally, to receive deep links while the app is open we need to add the Firebase link subscription handler. This is simple as well. In the subscribe function of the React Navigation linking options we add the following code:

const handleDynamicLink = (
   dynamicLink: FirebaseDynamicLinksTypes.DynamicLink,
) => {
   listener(dynamicLink.url);
};
const unsubscribeToDynamicLinks = dynamicLinks().onLink(handleDynamicLink);
return () => {
   unsubscribeToDynamicLinks();
   Linking.removeEventListener('url', onReceiveURL);
};

Taken together, your deep linking config object should look like this now:

const linking: LinkingOptions = {
  prefixes: ['mylinker://', 'http://mylinker.com/'],
  async getInitialURL(): Promise<string> {
    // Check if the app was opened by a deep link
    const url = await Linking.getInitialURL();
    const dynamicLinkUrl = await dynamicLinks().getInitialLink();
    if (dynamicLinkUrl) {
      return dynamicLinkUrl.url;
    }
    if (url) {
      return url;
    }
    // If it was not opened by a deep link, go to the home screen
    return 'mylinker://home';
  },
  // Custom function to subscribe to incoming links
  subscribe(listener: (deeplink: string) => void) {
    // First, you may want to do the default deep link handling
    const onReceiveURL = ({url}: {url: string}) => listener(url);
    // Listen to incoming links from deep linking
    Linking.addEventListener('url', onReceiveURL);
    const handleDynamicLink = (
      dynamicLink: FirebaseDynamicLinksTypes.DynamicLink,
    ) => {
      listener(dynamicLink.url);
    };
    const unsubscribeToDynamicLinks = dynamicLinks().onLink(handleDynamicLink);
    return () => {
      unsubscribeToDynamicLinks();
      Linking.removeEventListener('url', onReceiveURL);
    };
  },
  config: {
    screens: {
      [ROOT_SCREEN_NAMES.HOME_SCREEN]: {
        path: 'home',
      },
      [ROOT_SCREEN_NAMES.SCREEN_TWO]: {
        path: 'screen2',
      },
      [ROOT_SCREEN_NAMES.SCREEN_THREE]: {
        path: 'screen3',
      },
    },
  },
};

Creating and Testing a Deep Link

After setting up deep links with the above instructions, it makes sense to test things out and make sure they actually work. The process of creating a dynamic link is as follows:

Step 1 — You’ll want to set your deep link URL. This can essentially be random. This is the URL that the user sees when you share the link.

Step 2 — You’ll be presented with a screen like this:

When populating the Deep Link URL field use the same URL you used when following the instructions for RNFirebase. The Deep Link URL matters because it is where you want to deep link to in the app. The suffix of this URL will be where we want to deep link to in the app. We will test using screen 3. You can just as easily change the end of this url with screen 2 and things will still work.

Steps 3 and 4 are similar. In this section you can basically just check off that you want to open the Android and iOS versions of the app. After this you can just next through the last section of the deep link creation process.

Finally, to test, copy and paste the link provided by the Firebase Console and place it in the notes app. When you tap this link in the notes app on your phone, TADA! It opens the app to screen 3.

That’s all for part two! You should now be able to create and open deep links on different services. Look forward to Part 3 where we will go over how to use push notifications with deep links.

For more information on deep linking with React-Native, click here to speak to one of our experts.

Daniel is an Agile Software Developer specializing in Flutter and React-Native. As much as he likes cross platform he is passionate about all types of mobile development including native iOS and Android and is always looking to advance his skill in the mobile development world.

TribalScale is a global innovation firm that helps enterprises adapt and thrive in the digital era. We transform teams and processes, build best-in-class digital products, and create disruptive startups. Learn more about us on our website. Connect with us on Twitter, LinkedIn & Facebook!