What is Dynamic Linking in Firebase?

How can we implement Dynamic Links (Deep links) in React Native using Firebase

1. What are Dynamic Links?

Nowadays, you must have seen that in the message or email you have got some link, and on clicking that link either that link opens in AppStore, GooglePlay, or Web browser on a particular page. Those links are dynamic.

Deep Links:

Deep-link depends on the dynamic link, When we click on a dynamic link, if that link contains some specific data, that data will be extracted by that screen/page and will do some operation like, can get user details, or can get the URL of a particular screen & redirect.

2. Why is it important to use dynamic links?

Dynamic-link is important to increase your marketing, secure password reset, provide offers to your users, and many advantages can be availed by dynamic links.

With Dynamic Links, your users get the best available experience for the platform they open your link on. If a user opens a Dynamic Link on iOS or Android, they can be taken directly to the linked content in your native app & if the app is not already installed that opens in AppStore & GooglePlay & encourages users to install your app.

How can we implement dynamic link features in our app?

We will achieve a dynamic link by integrating Firebase dynamic link. Hence we will do it Step by Step.

Step 1.

Install required libraries

We need to install three libs in our react native project.

# Install & set up the app module yarn add @react-native-firebase/app

This is a core Firebase lib that needs to integrate the Firebase into our project.

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

This is used to implement dynamic links.

# Install the Firebase analytics module yarn add @react-native-firebase/analytics

This lib is optional, It provides you with analytical data in the Firebase dashboard.

# If you’re developing your app using iOS, run this command

cd ios/ && pod install

Step 2.

After installing the required libs, we need to create an app in the Firebase console for Android & iOS. If you have not created an account for Firebase first, you need to create that.

Link: https://console.firebase.google.com

You find most videos regarding creating projects in the Firebase console

https://www.youtube.com/watch?v=eeGKcZGkKrc

Step 3.

Setup Firebase dynamic link in Firebase console

Open the Dynamic Links tab and configure a new domain for your app. In this test example, we’ve created one for https://rnfbtestapplication.page.link.

You can provide your custom link.

After set up you can create a dynamic link by clicking on the “New Dynamic Link” button.

3. In addition, iOS set up

It is necessary to have an Apple developer account to set up Dynamic Links on iOS.

• At the Firebase console, give your app an App Store ID and a Team ID.
  • If you don’t have an App Store ID yet, you can fill in any number for the time being.
  • At the Apple developer console, you’ll find your Team ID.
• As previously In the Firebase console, test the domain you created (the first step in Firebase Setup).
  • In your browser, go to https://www.yourdomain.com/apple-app-site-association.
  • A detailed array attribute in the response will include an object with the property appID.
  • That will be the app ID for your app (It may take some time for your domain to register).
  • Before continuing, please double-check that it is registered.
• After you’ve confirmed that your domain has been registered, go to your Apple developer dashboard and build a provisioning profile for your app.
  • Please double-check that you’ve activated the Associated Domain feature before proceeding.

In Xcode, open your project and navigate to the TARGETS header to find your app.

Select the Signing & Capabilities tab from the drop-down menu.

You must verify that your Team is registered and that your Provisioning Profile section is filled out.

Please prefix the domain you generated in your Firebase console with app links and add it to the Associated Domains:

Add a URL Name to your project by clicking the Info tab.

You can call the Identifier Bundle Id or whatever you want.

To the URL Schemes property, provide your bundle identification.

4. Dynamic Links With Custom Domains

If your Firebase project has a custom domain, you must use the FirebaseDynamicLinksCustomDomains key to add the dynamic link URL prefix to your iOS project’s info.plist file.
You can also add several URLs.

Example:

<?xml version="1.0" encoding="UTF-8"?>
		<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
		<plist version="1.0">
		<dict>
		<key>FirebaseDynamicLinksCustomDomains</key>
		<array>
		<string>https://custom.domain.io/bla</string>
		<string>https://custom.domain.io/bla2</string>
		</array>

		...other settings

		</dict>
		</plist>

If you don’t include this, the dynamic link will launch your app, but you won’t be able to retrieve any deep link data from within your app because the deep link will be disregarded.

5. iOS Testing Your Dynamic Link

You’ll need a real device to test your dynamic link because it won’t function on a simulator.

Application Is Installed On Device

The Notes app on iOS is a nice location to paste your dynamic link and see if it works.

Even if it isn’t a published app, it should work.

The application has not been installed on the device.

• Switch the App Store ID in your Firebase Console project settings to a valid App Store ID e.g. iOS Notes App Store ID.
• Generate a new dynamic link and associate it with your app.
• Copy the link and paste it into the iOS Notes app. It should send you to the App Store for the ID you specified in your project settings when you press. It’s enough that your dynamic link has made it to the App Store to demonstrate that it’s working.

6. iOS Troubleshooting

• Ensure you have the right URL in the Associated Domains in Xcode.
  • 
• Ensure you have input the correct Team ID in the Firebase console.
  • 
• Copy the link and paste it into the iOS Notes app.
  Long tap the link to bring up the menu, then select “Open in [YOUR APP NAME].”
  If you select “Open in Safari,” the dynamic link domain for your device will be disabled.
  • 
• Make sure you have an Apple app site association file for your app on your dynamic link domain. Go to the following address in your browser to see what’s going on:/apple-app-site-association/ [your domain]
  • 
• There is a known bug that prevents Apple from downloading the app site association file, which you can read about here. Uninstall your program, restart your smartphone, and reinstall it as a workaround.
• Ensure your deep link field, especially if it contains a query string, is properly URL-encoded.

7. Android Setup

• Create an SHA-256 fingerprint for your app using these steps and upload it to your Firebase console.
  • 
• At your Firebase console, test the domain you created (the first step in Firebase Setup). Open your browser and navigate to [your-domain]/.well-known/assetlinks.json. The answer will include a target object with a package name property, which should be your app’s package name. Please wait till you see this before proceeding; registration may take some time.
• Include your domains in the android/app/src/main/AndroidManifest.xml file so that your app knows which links to open.
  For instance, code, see the official documentation.
• By pasting the dynamic URL into a text message, notepad, or email and ensuring that it opens your application, you may see if it works in your emulator (ensure the app is installed on the emulator).

8. Create a Link

Dynamic connections can be created using the Firebase console, your app, or even a bespoke API.
For further information, see the Firebase guide on creating dynamic links.
We’ll show you how to create links in your application code in the sections below:

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

		async function buildLink() {
		const link = await dynamicLinks().buildLink({
		link: 'https://invertase.io',
		// domainUriPrefix is created in your Firebase console
		domainUriPrefix: 'https://xyz.page.link',
		// optional setup which updates Firebase analytics campaign
		// "banner". This also needs setting up before hand
		analytics: {
		campaign: 'banner',
		},
		});

		return link;
		}

9. Listening for Dynamic Links

The module provides two methods for reacting to events in the forefront and background/quit of the program.

Foreground events

You can use the onLink method to subscribe to events as they happen when the app is in the forefront (visible on the device):

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

		function App() {
		const handleDynamicLink = link => {
		// Handle dynamic link inside your own application
		if (link.url === 'https://invertase.io/offer') {
		// ...navigate to your offers screen
		}
		};

		useEffect(() => {
		const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
		// When the component is unmounted, remove the listener
		return () => unsubscribe();
		}, []);

		return null;
		}

10. Background/Quit events

If the application is in the background or has completely quit, the getInitialLink method can be used to see if it was launched via a link:

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

		function App() {
		useEffect(() => {
		dynamicLinks()
		.getInitialLink()
		.then(link => {
		if (link.url === 'https://invertase.io/offer') {
		// ...set initial route as offers screen
		}
		});
		}, []);
		return null;}

In Conclusion of Dynamic Linking in Firebase:

In other words, Dynamics might be more beneficial for our marketing strategy & maintaining security. Additionally, dynamic link encourages or enforce the installation of your app if they have not been instilled yet. If you are developing a shopping, e-commerce-based app, then you can send your users coupon dynamic links that will attract new users to use your app. Therefore many more business concepts can avail benefits of the dynamic link concept.