Step by step guide to setting up Firebase Dynamic Links.

Shubham Choudhary — Fri, 26 Jun 2020 19:04:41 +0000

This post covers each step needed to set up firebase dynamic links. As it was really confusing for me to set up and especially making platform-specific changes to codebase. Firstly I will cover Firebase dynamic link installation-related instructions then will move to Platform(ios/android) specific changes.

Put on your 🎧 headphones, turn up the music and just follow each step. 😅

Installation

Firebase Dynamic module requires that the @react-native-firebase/app module is already setup and installed.

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

yarn add @react-native-firebase/dynamic-links
If you're developing your app: cd ios/ && pod install

Firebase Setup

Go to dynamic links section of your firebase console and configure a new domain for your app. Example- https://rnfbtestapplication.page.link
Create a dynamic link with your domain. Example- https://rnfbtestapplication.page.link/invite/132

Android Setup

Create a SHA-256 fingerprint using these instructions for your app, and add to your app in your Firebase console.

2. Download google-services.json and put it inside your project in ./android/app folder.

3. Test the domain you created in your Firebase console. Go to the following location in your browser [your-domain]/.well-known/assetlinks.json.
Example- https://rnfbtestapplication.page.link/.well-known/assetlinks.json.

The response will have a target object containing a package_name which ought to have your app's package name. Please do not proceed until you see this, it may take a while to register.

4. Receiving Links: add a new intent filter to the activity that handles deep links for your app. In your project's AndroidManifest.xml add following intent-filter

<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <data android:host="rnfbtestapplication.page.link" android:scheme="http"/>
    <data android:host="rnfbtestapplication.page.link" android:scheme="https"/>
</intent-filter>

IOS Setup

To setup Dynamic Links on iOS, it is a prerequisite that you have an Apple developer account setup.

Add an App Store ID & Team ID to your app in your Firebase console. If you do not have an App Store ID yet, you can put any number in here for now. Your Team ID can be found in your Apple developer console.

2. Test the domain you created in your Firebase console, just like you did for android in step 3. Go to the following location in your browser [your domain]/apple-app-site-association, Example- https://rnfbtestapplication.page.link/apple-app-site-association. The response will have a details array property containing an object that has the property appID. That will be your app's app ID (It may take some time for your domain to register). Please ensure it is registered before proceeding.

3. Once you're sure your domain is registered, you need to head over to your Apple developer console and create a provisioning profile for your app. Please ensure you've enabled the Associated Domain capability which you should check before proceeding.

4. Receiving Link:

Open your project in Xcode and open your app under the TARGETS header. Click the Signing & Capabilities tab. You will need to ensure your Team is registered, and your Provisioning Profile field is completed. Add the domain you created in your Firebase console to the Associated Domains and prefix with applinks:

Example: applinks:rnfbtestapplication.page.link

Click the Info tab , and add a URL Type to your project. Add your bundle id to URL SCHEMES and write BundleID in identifier field.

In AppDelegate.m file in application:continueUserActivity:restorationHandler : method, handle links received as Universal Links when the app is already installed.

- (BOOL)application:(UIApplication *)application
continueUserActivity:(nonnull NSUserActivity *)userActivity
 restorationHandler: 
#if defined(__IPHONE_12_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_12_0)
(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> *_Nullable))restorationHandler {
#else
    (nonnull void (^)(NSArray *_Nullable))restorationHandler {
#endif  // __IPHONE_12_0
  BOOL handled = [[FIRDynamicLinks dynamicLinks] handleUniversalLink:userActivity.webpageURL
                                                          completion:^(FIRDynamicLink * _Nullable dynamicLink,
                                                                       NSError * _Nullable error) {
                                                            // ...
                                                          }];
  return handled;
}

This is it for native changes required for ios and android. Now we will be using firebase dynamic links api to create dynamic links and adding listeners to receive and handle those links.

Create a Link

import dynamicLinks 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 set up which updates Firebase analytics campaign
    // "banner". This also needs setting up before hand
    analytics: {
      campaign: 'banner',
    },
  });

  return link;
}

Listening for Dynamic Links

//  firebase dynamic linking listener
  useEffect(() => {
    dynamicLinks()
      .getInitialLink()
      .then((link) => {
        handleDynamicLink(link);
      });
    const linkingListener = dynamicLinks().onLink(handleDynamicLink);
    return () => {
      linkingListener();
    };
  }, []);

  function handleDynamicLink(link) {
    console.log(link);
}

Why using React Native should be the default way of building Apps in 2020.

Shubham Choudhary — Wed, 21 Aug 2019 03:35:31 +0000

I am the guy who quit coding several times in life, but deep inside my heart. I always felt like a programmer. I always wanted to be one. Here is the article I have written 8 months ago, describing my journey as a programmer. I described why I started with React.js for front end soon after learning javascript.

https://medium.com/@deol.shubham/why-i-started-with-react-for-front-end-web-soon-after-learning-javascript-fa6cf8f7efcd

In this article, I am going to write about React-Native and why this should be your first choice for building mobile applications.
React Native is growing, and so the community. Facebook just announced version 0.60 of react-native. It includes support for using Hermes with your project, and this is also the time when facebook also made Herms open-source. Hooray!!

https://facebook.github.io/react-native/docs/hermes

This came as a surprise for us, first releasing version which includes support for android x and much more, then open-sourcing Hermes. Of course, This release also contains a lot of breaking changes. All of our dependencies need to be updated to support version 0.60, but this is noting compared to benefits which we are going to get.

With this release, people are very excited and testing out Hermes with react native version 0.60. Performance of app has increased 2 x times, and which I guess eliminates one reason for not using react native apps. Now React native apps are going to be 2 x more performant.

Installing dependencies got easier
This is one more reason to use react-native as your first choice. Now React-Native includes support for auto-linking those dependencies which contain native code.

This is how this works
_
Each platform defines its own platforms configuration. It instructs the CLI on how to find information about native dependencies. This information is exposed through the config command in a JSON format. It's then used by the scripts run by the platform's build tools. Each script applies the logic to link native dependencies specific to its platform.

Now, Mostly all we have to worry about writing javascript and witness the magic which react-native does for us.

There are a hell lot of other reasons to use React Native as your first choice, But the reasons I pointed out here are new additions to previous ones.

Read this blog for more info on why you should or shouldn’t use react-native.

https://bit.ly/31Wla6H

Finally,
Let me know in the comment section what other reasons can be there to use react-native to build mobile apps which are not pointed out previously. Consider this article as the ground for discussion which can lead us to better conclusions. :)

DEV Community: Shubham Choudhary