CODEWITHSUNDEEP
firebasereact-navigationfirebase-dynamic-linksreact-navigation-v6
Bilal Abdeen
Bilal Abdeen

Reputation: 1947

Configuring Firebase Dynamic Links with React Navigation

I am struggling to configure Firebase Dynamic Links with React Navigation. The dynamic link triggers successfully the App. However, it does not navigate to the correct route (screen.) I am working on Android, and have not, yet, started the more difficult (for me) iOS configuration. I am sure I got one (or more) of the configuration options wrong. I would greatly appreciate your effort and time to help.

The following works and navigates to the correct route:

adb shell am start -W -a android.intent.action.VIEW -d casualjob://InvitedEmployee com.casualjob.

The following starts the app, but does NOT navigate to the correct route:

npx uri-scheme open "https://casualjobsyd.page.link/app?link=https%3A%2F%2Fbuildwebsitepro.com.au%2Fcasualjob%2FInvitedEmployee" --android.

The link preview https://casualjobsyd.page.link/app?d=1 returns the dynamic link tree successfully. The following command returns the correct json: https://casualjobsyd.page.link/.well-known/assetlinks.json

Firebase Console Configuration:

AndroidManifest.xml

...
<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustResize"
    android:exported="true"
>
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="casualjob"/>
    </intent-filter>
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="http"  android:host="casualjobsyd.page.link/app"/>
        <data android:scheme="https" android:host="casualjobsyd.page.link/app"/>
    </intent-filter>
</activity>
...

Dynamic Links are generated using the following code:

const link = await dynamicLinks().buildLink({
    link: "https://buildwebsitepro.com.au/casualjob/", 
    domainUriPrefix: "https://casualjobsyd.page.link/app",
});
const linkSentToUser = link + "InvitedEmployee";
// result of the above is: "https://casualjobsyd.page.link/app?link=https%3A%2F%2Fbuildwebsitepro.com.au%2Fcasualjob%2FInvitedEmployee"

React Navigation Dynamic Linking Configuration:

const linking = {
    prefixes: ["casualjob://", "https://casualjobsyd.page.link/app", ], 
    config: config,
    async getInitialURL() {
        const { isAvailable } = utils().playServicesAvailability;
        if (isAvailable) {
            const initialLink = await dynamicLinks().getInitialLink(); 
            if (initialLink) {
                return initialLink.url;
            }
        }
        const url = await Linking.getInitialURL(); 
        return url;
    },
    subscribe(listener) {
        const unsubscribeFirebase = dynamicLinks().onLink(({ url }) => {
            listener(url);
        });
        const linkingSubscription = Linking.addEventListener("url", ({ url }) => {
            listener(url);
        });
        return () => {
            unsubscribeFirebase();
            linkingSubscription.remove();
        };
    },
};

Upvotes: 2

Views: 623

Answers (1)

Bilal Abdeen
Bilal Abdeen

Reputation: 1947

I figured it out. The most important change is the need to add every Deep link to the Firebase Console. For the example above, I had to change the following.

The Deep Link defined on Firebase Console was: https://buildwebsitepro.com.au/casualjob

The Deep Link defined on Firebase Console should be: https://buildwebsitepro.com.au/casualjob/InvitedEmployee

Other changes need to be applied as well.

const linking = {
    // The 2nd element below should be changed to look like the following.
    prefixes: ["casualjob://", "https://casualjobsyd.page.link/app", ], 
    // ...
}

I learnt that my Androidmanifest.xml was wrong. The following is recommended by the documentation, although it did not seem to be necessary!?

<!-- Note that the android:host must be set to the domain of "your deep link," and NOT the "Dynamic Links" domain -->
<intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <data android:scheme="https" android:host="buildwebsitepro.com.au" android:pathPrefix="/casualjob/" />
</intent-filter>

<!--  android:autoVerify="true" is required below -->
<!-- Note that the android:host must be set to your "Dynamic Links" domain, and not the domain of "your deep link." -->
<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:scheme="https" android:host="casualjobsyd.page.link/app"/>
    <data android:scheme="http"  android:host="casualjobsyd.page.link/app"/>
</intent-filter>

Upvotes: 1

Related Questions