Shad Mirza

Posted on Aug 21, 2019 • Originally published at iamshadmirza.hashnode.dev

Handling Incoming Dynamic Links

#javascript #reactnative #beginners #firebase

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:

Project Setup
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:-

Create a React Native project
Create an application on firebase console
Add react-native-firebase
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).
Download google-services.json and paste it inside /deeplinkdemo/android/app/. Make sure the location is correct.
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.

Step 4. Add Firebase Dynamic Links:

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"
}

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
 );
}

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: -

Create a Dynamic Link.
Handle the Incoming Link.

Step 1. Create a Dynamic 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
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)
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.

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

Step 2. Handle the Incoming link

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:-

Import firebase module.

import firebase from 'react-native-firebase';

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);
}

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 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:

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

I hope you're able to resolve the issues and successfully implement the Dynamic Links from firebase.

Share this article if you find it helpful.

See you in the next article. Shad

DEV Community