There are two steps involved in this section:
- Create a dynamic link
- 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:
https://deeplinkblogdemo.page.link
in my case):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" />
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:
firebase
module.import firebase from 'react-native-firebase';
async componentDidMount() {
let url = await firebase.links().getInitialLink();
console.log('incoming url', url);
}
We can add conditions here to check for a certain match in URL and, based on that, we can write functions per our need. For example:
async componentDidMount() {
let url = await firebase.links().getInitialLink();
if(url === 'some_condition_here'){
//code to execute
}
}
Add the navigation path or anything else as you need and you’re good to go.
We will build a referral system in our React Native app using this logic because that is a perfect use case to demonstrate Dynamic Links.
You might run into some dependency issues because of the recent changes that happened to the AndroidX library (because I did). Here is how I solved them:
Alt + Enter
and import the dependency. Remove the old one already present and we are done.Short Dynamic Links do not work for some people. You can create a long version of Dynamic Links as described in the fourth 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 Firebase.
Share this article if you find it helpful.
See you in the next article.
Free Resources