Handling Incoming Dynamic Links

Subscribe to my newsletter and never miss my upcoming articles

This is Part 2 of the series React Native Deep Linking Simplified and in Part 1 we learned How to add Deep Links.
In this article, our goal is to learn how to handle incoming links like a pro.
We will also see how to route the user to a particular screen based on the incoming link.

The term Deep Link is used for the https scheme and Dynamic Link is used for the app scheme. We can use both to navigate our user so don't get confused between these two terms.

Let's get started.

Table of Content

This article is divided into two main sections. We will go through these as follows:

  1. Project Setup
  2. Test Dynamic Link on the device

Project Setup

We will use the react-native-firebase module to configure Dynamic Links in our React Native Project. It involves 4 simple steps:

Steps involved:-

  1. Create a React Native project
  2. Create an application on firebase console
  3. Add react-native-firebase
  4. Add Firebase Dynamic Link module

Step 1. Create a React Native Project

Follow the steps in Part 1 of this series and add Deep Link as described. We will be adding firebase-invites support via the same Dynamic/Deep Link we created earlier.

Step 2. Create an application on firebase console

Let's create an application on the firebase console to use the Firebase SDK. Follow this link and create an application.

  • Create a project by clicking on Add Project.

  • Follow the steps to add Android/iOS app. Make sure the project name in Register app section matches with your react-native project (com.deeplinkdemo in our case). 'Register App'

  • Download google-services.json and paste it inside /deeplinkdemo/android/app/. Make sure the location is correct.
    'Project structure'
  • Add libraries as instructed and Sync Project. It will look something like this:-

    • Project-level build.gradle
      dependencies {
      classpath("com.android.tools.build:gradle:3.4.1")
      classpath 'com.google.gms:google-services:4.3.0' //Add this line
      }
      
    • App-level build.gradle
      dependendies {
      //...
      implementation 'com.google.firebase:firebase-core:17.0.1' // Add this line
      }
      //Add to the bottom of the file
      apply plugin: 'com.google.gms.google-services'
      

    Please use the latest firebase dependency available. You can add it from Android Studio also by going to:
    File -> Project Structure -> Dependencies

Step 3. Add react-native-firebase

Go to your project root directory and run this command:

npm install react-native-firebase --save

(Optional) Link the module if your react-native version is less than 0.60.

react-native link react-native-firebase

React Native version (>0.60) supports autolinking

Follow the Manual Linking guide if you're having any issues with linking react-native-firebase or you're using an earlier version of React Native.

Manual Linking for React Native(<0.60)

Check out the official docs for updated method.

Android

  • Add react-native-firebase to App-level build.gradle
    dependencies {
    //...
    implementation project(':react-native-firebase') //Add this line
    }
    
  • Edit settings.gradle
    //Add these lines
    include ':react-native-firebase'
    project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
    
  • Edit MainApplication.java

    ...
    import io.invertase.firebase.RNFirebasePackage; // import this
    
    @Override
    protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new RNFirebasePackage(), // Add this line
    );
    }
    
  • Sync Project and we are good to go.

We have to include other modules as the RNFirebasePackage we imported earlier provides the core features only.
If you go to the Firebase Invites Docs, you will see a warning.

Firebase Invites is deprecated. You can create cross-platform invitation links that survive app installation using Firebase Dynamic Links. Please see the Migration Guide for more details.

It means we are eventually be using Firebase Dynamic Links module in our project.

  • Add the dependency to android/app/build.gradle file:
dependencies {
 // ...
 implementation "com.google.firebase:firebase-dynamic-links:19.0.0" //Add this line
 implementation "com.google.firebase:firebase-invites:17.0.0" //Add this line
}
  • Edit MainApplication.java:
import ...
//import this package
import io.invertase.firebase.links.RNFirebaseLinksPackage;
@Override
protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
 new MainReactPackage(),
 new RNFirebasePackage(),
 new RNFirebaseLinksPackage() // Add this line
 );
}

for react-native@0.60 and above

 @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for
      // example:
      // packages.add(new MyReactNativePackage());
      packages.add(new RNFirebaseLinksPackage());// Add this line
      return packages;
    }
  • Sync Project and we are done. Let's move on to section 2.

If you're running into some dependency issues then Migrate to AndroidX. Check How to solve dependency issues at the end of this article.

See official docs for updated method.

Test Dynamic Link on the device

There are two steps involved in this section: -

  1. Create a Dynamic Link.
  2. Handle the Incoming Link.

Let's generate a link on the Firebase Console and update our intent filter. This link must be unique and provided by firebase itself. Follow these simple steps:

  • Select your app on Firebase Console and click on Get Started
    'get started'

  • Add a Domain. It will probably take a couple of tries to find a unique domain. Note it down when you find one. (example: https://deeplinkblogdemo.page.link in my case) 'add domain'

  • Edit AndroidManifest.xml and update the <data> tag in intent-filter with the Domain you just created:

    <data android:scheme="https"
    android:host="deeplinkblogdemo.page.link" />
    
  • Click on New Dynamic Link and follow the steps. Provide both Deep Link URL and Dynamic Link name under Setup your Dynamic Link section. 'add domain'

Now that we have created our Dynamic Link, we can move on to the next step.

The root file of your project App.js is the perfect place to add handling logic. So let's start editing the root file. Follow these three simple steps:-

  1. Import firebase module.
    import firebase from 'react-native-firebase';
    
  2. Add the code to watch for incoming links when the root file is mounted.
    async componentDidMount() {
    let url = await firebase.links().getInitialLink();
    console.log('incoming url', url);
    }
    
  3. Open the created Dynamic Link with any browser and check the log. Cheers if you can see the incoming url.

We can add conditions here to check for a certain match in url. On based of that we can write functions as per our need. For example:

async componentDidMount() {
 let url = await firebase.links().getInitialLink();
 if(url === 'some_condition_here'){
 //code to execute
 }
}

Add navigation path or anything as per your need and you're good to go.
We will build a referral system in our React Native App using this logic because that will a perfect use case to demonstrate Dynamic Links. So don't miss the third and final part of this series.

How to solve the dependency issue

You might run into some dependency issues because of the recent changes that happened to the AndroidX library (because I did) and here is how I solved them:

  1. Open your Project with Android Studio and select app folder.
  2. Go to Refractor -> Migrate to AndroidX -> Do refractor.
  3. Sync Project. If the issues persist follow steps 4 and 5.
  4. You will probably see a list of build issues in Build Output below. Go through each one them and find the conflicting variable.
  5. Press ALT + ENTER and import the dependency. Remove the old one already present and we are done.

Short dynamic links are not working for some people. You can create a long version of Dynamic Links as described in the third article of this series. Visit this link to check the working demo repo.

I hope you're able to resolve the issues and successfully implement the Dynamic Links from the firebase.
Share this article if you find it helpful.
See you in the next article.
Shad

Comments (9)

Vito Rizki Imanda's photo

i have follow all the steps BUT when i click dynamic link. My app opens BUT no url catch. So i cant add logic to redirect user

Show +6 replies
Mohd Shad Mirza's photo

Full Stack Developer at Hashnode

Hey Vito Rizki Imanda, I updated the blog and added demo repo. Check it out. Firebase official documentation is misleading. Invites are deprecated but you have to add it to work with react-native-firebase@5.x.x. I forgot to mention this earlier.

Vito Rizki Imanda's photo

Mohd Shad Mirza thank you so much, i'll check it out.. thank you~