Deep Linking In React Native Using Firebase Dynamic Links

1

Deeplinks are a concept that allows users to enter your app from links on the web. In this post I will discuss the challenges I can across while implementing the deep linking feature in a react native for both Android and IOS applications. I will try to cover all the steps in this post which will help you to achieve deep linking correctly.

We will use the React Native Firebase Dynamic Links module for handling dynamic links opened from anywhere.

Setup Firebase Project

The first step is to create a project in firebase console and setup IOS and android apps. Firebase console provides a Firebase configuration file (Android/iOS)

  • For iOS, you add a GoogleService-Info.plist configuration file
  • For Android, you add a google-services.json configuration file

Make sure TeamID in IOS configuration is correct (you can find your TeamID in Apple’s Developer Center)

Create a Dynamic Link

You can create a Dynamic Link either by using the Firebase console, using a REST API or by forming a URL by adding Dynamic Link parameters to a domain-specific to your app. You can set up a custom user friendly domain else a page.link subdomain will be used as a domain.

When a user clicks one of your Dynamic Links, your app opens and if your app is not installed, the user is sent to the Play Store or App Store to install your app (App Store or Play Store ID as specified in config).

Configure Firebase Dynamic Links

As we have already added support for firebase in the first step. Next, we will configure firebase dynamic links to enable our app to receive the Firebase Dynamic Links.

IOS

Ensure that your app’s App Store ID and your Team ID is specified in your app’s settings. You can verify that your Firebase project is properly configured to use Dynamic Links in your iOS app by opening the following URL:

https://your_dynamic_links_domain/apple-app-site-association

Your app is connected, if apple-app-site-association file contains a reference to your app’s TeamID and bundle identifier.

{
     "applinks": {
         "apps": [],
         "details": [
             {
                 "appID": "W725KQU123.com.example.app",
                 "paths": [
                     "NOT /_/",                     "/"
                 ]
             }
         ]
     }
 }
  • Open app’s Xcode project, in the Info tab, create a new URL type to be used for Dynamic Links. Enter a unique value in Identifier field and the URL scheme field to be your bundle identifier, which is the default URL scheme used by Dynamic Links.
  • In the Capabilities tab, enable Associated Domains and add the following to the Associated Domains list:
applinks:your_dynamic_links_domain
  • If you want to use a custom domain with Dynamic Links, in your Info.plist file, create a key called FirebaseDynamicLinksCustomDomains and set it to your app’s Dynamic Links URL prefixes. For instance:
  • InAppDelegate.m file, add application:continueUserActivity:restorationHandler: method, handle links received as Universal Links when the app is already installed.
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler{
  return [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
}

Android

Android doesn’t need additional configuration for default or custom domains.

Install React Native Firebase Dynamic Links Package

yarn add @react-native-firebase/dynamic-links

# Using iOS
cd ios/ && pod install

React Native auto-linking will link the library, if not. For manual installation follow the setup instructions for Android & iOS.

Receive Dynamic Links in your components

Import the Dynamic Links package into your project:

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

Handle dynamic links

dynamicLinks().onLink(url => { 
  // your handling
});

Want your app to listen for links change while app in foreground or background? Add an event listener for URL change.

  componentDidMount() {
    Linking.addEventListener('url', this._handleOpenURL);
  }

  componentWillUnmount() {
    Linking.removeEventListener('url', this._handleOpenURL);
  }

  _handleOpenURL = event => {
      dynamicLinks().onLink(url => {
         // Your custom logic here 
      });
  };

Congratulations, your app is ready to navigate your application cross-platform.

1 Comment
  1. Zeerak Hameem says

    Thanks man, FirebaseDynamicLinksCustomDomains this step really helped for iOS. I have been missing this one.

Leave A Reply

Your email address will not be published.