If you are running both website and apps for serving same content/service, then your app must be able to handle deep linking / universal links properly. It should be able to open your website’s link in app, if app exists or in browser, if app doesn’t exist. For doing this in react native iOS app, one needs to do some configurations in react native app as well as on website.

What changes you need to do on website?

Step 1: Make sure that your website is running on HTTPS

Step 2: Create a new file named“apple-app-site-association” without .json extension .

• File should be less than or equal to 128 Kb (iOS 9.3.1 onwards)
• It should be served as application/json mime type
• It should be served over Https
• It should not have any extension
• File should have valid json with following content -

Note : Replace <TeamID>, <Bundle-Identifier>, <WebRoutes> with your details.

Step 3 : Now either you can place this file directly on your website’s root directory or can create a .well-known folder on your website’s root directory and place here.

Step 4: After placing the apple-app-site-association on website, please test the file using this (AASA) Validator

If it passes all tests on validator then you have configured it correctly.

What changes you need to do in xcode?

Step 1 : Log into developer.apple.com with your account and Enable Associated Domains in your app identifier.

Step 2 : Now Launch Xcode and select the Capabilities tab. Enable Associated Domains and add two values.

1. applinks:YOUR_WEBSITE_DOMAIN
2. activitycontinuation:YOUR_WEBSITE_DOMAIN

Note : In both the above values, do not add https:// in YOUR_WEBSITE_DOMAIN.

For example, if you website it https://example.com then it should have values like - Applinks:example.com & activitycontinuation:example.com

Step 2: Open entitlements file of your project and mark Target Membership checked. See in below screenshot -

If you are unable to check on Target Membership then Select Build Phases and add entitlements under Copy Bundle Resources. It allows you to mark checked on Target Membership

Step 3: Link RCTLinking to your project (if not linked).

Step 4: Update AppDelegate.m file Add the following code in the end of AppDelegate.m file:

What changes you need to do in your react-native app?

Add the following code in your react native app for handling deep linking -

That’s it. Now the app should redirect the specified website’s links to the correct route in app.