Configuring Firebase Dynamic Links with React Navigation

[Bilal-Abdeen]

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:

• Dynamic Link Name: https://casualjobsyd.page.link
• The Short Dynamic Link: https://casualjobsyd.page.link/app
• Deep Link: https://buildwebsitepro.com.au/casualjob

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();
		};
	},
};

[Bilal-Abdeen]

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>