Dynamic Links using Firebase

Dynamic Links are like deep links into an app. it is work whether app is installed or not. When users open a Dynamic Link into an app that is not installed, then it is open either Play Store, App Store or any other web for install app,
After users install and open the app, the app displays the deep-linked content.

Dynamic Links mostly used in referral based sharing app, inviting other peoples or Sharing Certain Product. The benefit of mobile dynamic linking is the ability for marketers and app developers to bring users directly into the specific location within their app simple link.

Here We are Implement Dynamic Links using firebase so first basic step is to implement firebase into app

Project Setup

  • Add Firebase To React-Native

here we are, using react-native > 0.60 version and latest firebase version V6
to use dynamic links from firebase we also need firebase app dependency to install that follow below steps :

# Using npm
npm install --save @react-native-firebase/app

# Using Yarn
yarn add @react-native-firebase/app

After that install pod for ios for more information follow this link. just keep in mind that before you use any of the firebase service must install this module.

Above are pre required step to use dynamic links.

Install Dynamic Links

# Install dynamic links module using npm
npm install @react-native-firebase/dynamic-links

Or

# Install dynamic links module using yarn
yarn add @react-native-firebase/dynamic-links

# For IOS app, run this command
cd ios/ && pod install

If you are using react native below 0.60 than do manual linking for android and ios both for that follow this link for IOS and for Android follow this link
When you are doing manual linking or get any androidX related issue than follow this link this can help.

Usage

Creating Dynamic Link :

Add a domain. this is very important part let me explain in brief. there is two things first custom domain and second is firebase default provided domain. if you wants dynamic links on you website like my url is www.example.com in dynamic link than add that other wise firebase provide page.link domain like myDynamicLink.page.link which is actually not my website this domain is created by firebase. so than select link and continue.

Now We can create Dynamic Links but before that we need to do one setup for IOS go to Project Settings => Select ios app and add App Store ID and Team ID
also add support email now we can good go.

  • Check your domain is ready or not by using link [your domain]/apple-app-site-association in response you can see object with containing Apple Id.
  • Goto Apple developer console enable Associate domain capabilities.
  • For Custom domain also check this link

Click on New Dynamic Link andfollow the steps. You can see Deep link url and Dynamic link name setup under setup dynamic link section. You can also pass params in link like in below image.

There is also some basic setup for dynamic link where do you open in app or browser, select according to your requirement.

We can Also Create Dynamic link Programmatically let’s do that

# Install the dynamic-links module
import dynamicLinks from '@react-native-firebase/dynamic-links';

var link = dynamicLinks().buildShortLink(
{
link: 'https://blogdynamiclink.page.link/param=value',
domainUriPrefix: 'https://blogdynamiclink.page.link',
android: {
packageName: 'com.my.bundleId',
},
ios: {
appStoreId: '123456789',
bundleId: 'com.my.bundleId',
},
},
dynamicLinks.ShortLinkType.UNGUESSABLE,
);

its return dynamic link with shorter format. there are so much variation available you can check that on this link in create link section.

Handle Incoming Dynamic Link:
IOS Steps :

Click the Info tab, and add Url Type to your project.

For Android :
Edit your AndroidManifest.xml file and update MainActivity tag.

<intent-filter>
<data android:scheme="https"
android:host="blogDynamicLink.page.link" />
</intent-filter>

Listening event in code:

  • When app is in foreground
import dynamicLinks from '@react-native-firebase/dynamic-links';

componentDidMount() {
dynamicLinks().onLink((url) => {
// handle link inside app
});
}
  • When app is in background or first time open
import dynamicLinks from '@react-native-firebase/dynamic-links';

componentDidMount() {
dynamicLinks().getInitialLink().then((link) => {
// handle link in app
});
}

Handling Errors

  • compare teamId in associate domains url [your domain]/apple-app-site-association
  • also try remove app and restart mobile if not working.

Bonus

Originally published at http://blog.logicwind.com on January 5, 2021.

We craft digital products for your business growth. Development | Marketing | Branding | Strategic Partnership