Implement Firebase Dynamic Links in Ionic / React.js application with Capacitor


I’ve developed a React.js application with Firebase as the backend, we’re also using Ionic to deploy the application to android and IOS builds. We’re adding some native functionality using Capacitor at the moment and we’re having trouble implementing Dynamic Links.

There are a couple of packages out there, after a lot of searching I came across this package:

The problem that this package does not work with Capacitor 3.0, someone was friendly enough to submit a pull request but the repo owner has not merged in the fix yet. Some people forked the repo to implement the fix, I came across the below repo.

Everything goes pretty well but I’m unsure where to place the listener? Should I place it on app level? If so, where would one place this code snippet on Android / IOS respectively?


// addListener('deepLinkOpen', (data: { url: string })
// Add this method when the app starts to listen for the dynamic link.

CapacitorFirebaseDynamicLinks.addListener('deepLinkOpen', (data: { url: string }) => {
      Implement your navigation handler

CapacitorFirebaseDynamicLinks.addListener(‘deepLinkOpen’, (data: { url: string }) => {
Implement your navigation handler


I have dynamic links implemented on Capacitor v2.4.2, Angular. I used the first plugin by Turnoutt.
This differs from your Capacitor version, but here are my inputs that might help.

The CapacitorFirebaseDynamicLinks.addListener listener will be placed in your React code where the app starts and once the platform is ready. I am limited by my react knowledge, but this is how listeners are added in ionic react. It will be similar in implementation

For iOS native, there are separate steps that have to be followed with reference to this link

Specifically, in AppDelegate.swift, these are the changes that I made.

import Firebase

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    return true

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    // Called when the app was launched with a url. Feel free to add additional processing here,
    // but if you want the App API to support tracking app url opens, make sure to keep this call
    return CAPBridge.handleOpenUrl(url, options)

Answered By – Chetan Bansal

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published