There are many articles showing how to set up deep link and universal links in the app but the articles are scattered and I have compiled what I had found and put them in one page. This page describes how to set up deep link, universal link (or app link) for a React Native app in both Android and iOS environments.
Basics
This method uses React Navigation 6 to implement Deep Link & Universal (App) Link. It is based on the articles below:
React Navigation - Configuring Links https://reactnavigation.org/docs/configuring-links/
React Navigation - Deep Linking https://reactnavigation.org/docs/deep-linking/
Environment Setups - Domain Asset Verification
As a part of universal link setup, you must show Goole and Apple that your domain owns the app, so that they can safely redirect users to the app. If you are not doing a universal setup and just a deep link setup, you can skip this step.
Add both Android and iOS asset verification files to front projects /public/.well-known folder. This will make sure Google and Apple verifies that the app belongs to the your domain.
These files will be located and accessed in https://yourdomain/.well-known folder publicly.
Below describes how to set up for both Android and iOS.
Android
assetlinks.json
package_name and sha256_cert_fingerprints can be retrieved from Google Play Console > App signing. At the bottom of the page, you can simply copy Digital Assets Link JSON code block.
GOOGLE ASSET VALIDATION TEST
Use the following link to test the Google asset verification setup:
iOS
apple-app-site-association
NOTE that this file does NOT and should NOT have any file extensions!
appID can be found from Apple Developer > Account > Certificates, IDs & Profiles > Identifiers > Select the application.
The syntax for appID is [App ID Prefix].[Bundle ID]
IMPORTANT NOTE FOR IOS:
Hosting the asset verification file on the web site alone does NOT complete the process. There are two (2) steps involved in order to complete the process:
STEP 1:
Logon to Apple Developer > Account > Certificates, IDs & Profiles > Identifiers > Select the application. Make sure that Associated Domains capability is enabled.
STEP 2:
You must make sure when the file is accessed using GET method, response's Content-Type should be set to application/json.
Use the following method for setting if you are using AWS CloudFront (basically, you are creating a custom response header policy and apply the policy to the appropriate distributions):
1. Logon to AWS
2. Go to CloudFront > Policies > Response headers
3. Click on Create response headers policy button
4. Create a new response headers policy using the options below:
Name can be anything recognizable
Custom headers
Name: content-type
Value: application/json
Origin override: enabled
5. On the distributions you want to apply the response headers, add the following behaviors (Behaviors menu on each distribution):
Path pattern: /.well-known/apple-app-site-association
Origin and origin groups: your origin group (such as S3 bucket hosting the site)
Viewer protocol policy: HTTPS only
Response headers policy: [name of the policy you created from STEP 4]
Leave all others as default
APPLE ASSET VALIDATION TEST
Use the following link to test the Apple asset verification setup:
Environment Setups - App
Once you have set up domain asset verifications, you are ready to do an app setup for deep & universal (app) link.
Android
AndroidManifest.xml
Add two blocks of intents to auto-verify the web (for universal or app link) and app (deep link) schemes:
iOS
AppDelegate.m
Add necessary code blocks to AppDelegate.m file (follow the instructions to add Deep Link and Universal Link in the React Navigation article above).
(your app).entitlements
Add associated domains for universal links to work (as example below). In order for these to work, you MUST make sure that the Associated Domain capability is enabled on the app identifier settings in Apple Developer.
Sample React Native App Code Blocks
App.js
import NavigationContainer
in the block of const App = () => { }
