Consumer Authentication

/

SDKs

/

React Native SDK reference

/

Resources

/

Deep linking

Deep Linking

This process for enabling deeplinks in your project is different for Expo managed vs. bare (or vanilla) workflows.

For an in-depth guide to deeplinking with bare React Native projects, refer to the React Native docs.

While the React Native guide contains the full details, below is a summary of the steps required:

iOS Setup

  • Add the following to AppDelegate.m

    // Add the header at the top of the file:
    #import <React/RCTLinkingManager.h>
    
    // Add this above '@end':
    - (BOOL)application:(UIApplication *)application
        openURL:(NSURL *)url
        options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
    {
      return [RCTLinkingManager application:application openURL:url options:options];
    }
  • If your app is using Universal Links you'll need to add the following code as well:

    // Add this above '@end':
    - (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
      restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
    {
      return [RCTLinkingManager application:application
                      continueUserActivity:userActivity
                        restorationHandler:restorationHandler];
    }
  • Add the scheme to your project configuration. The easiest way to do this is with the uri-scheme package by running the following:

    npx uri-scheme add myapp --ios

    If you want to do it manually, open the project (e.g. SimpleApp/ios/SimpleApp.xcworkspace) in Xcode. Select the project in sidebar and navigate to the info tab. Scroll down to "URL Types" and add a new one. In the new URL type, set the identifier and the URL scheme to your desired URL scheme.

  • To make sure Universal Links work in your app, you will also need to setup Associated Domains on your server.

  • If you're using React Navigation within a hybrid app - an iOS app that has both Swift/Objective-C and React Native parts - you may be missing the RCTLinkingIOS subspec in your Podfile, which is installed by default in new React Native projects. To add this, ensure your Podfile looks like the following:

    pod 'React', :path => 'docs/node_modules/react-native', :subspecs => [
      . . . // other subspecs
      'RCTLinkingIOS',
      . . .
    ]

Android Setup

To configure the external linking in Android, you create a new intent in the manifest.

The easiest way to do this is with the uri-scheme package:

npx uri-scheme add myapp --android

If you want to add it manually, open up SimpleApp/android/app/src/main/AndroidManifest.xml, and make the following adjustments:

  • Set launchMode of MainActivity to singleTask in order to receive intent on existing MainActivity (this is the default, so you may not need to actually change anything).

  • Add the new <intent-filter> inside the MainActivity entry with a View type action:

    <activity
        android:name=".MainActivity"
        android:launchMode="singleTask">
        <intent-filter>
            <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="myapp" />
        </intent-filter>
    </activity>

Similar to Universal Links on iOS, you can also use a domain to associate the app with your website on Android by Verifying Android App Links. First, you need to configure your AndroidManifest.xml:

  • Add android:autoVerify="true" to your <intent-filter> entry.

  • Add your domain's scheme and host in a new <data> entry inside the <intent-filter>

After adding them it should look like this:

<activity
    android:name=".MainActivity"
    android:launchMode="singleTask">
    <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="myapp" />
        <data android:scheme="https" android:host="www.example.com" />
        <data android:scheme="http" android:host="www.example.com" />
    </intent-filter>
</activity>

Then, you need to declare the association between your website and your intent filters by hosting a Digital Asset Links JSON file.

Testing

To test deeplinking functionality before integrating and testing Stytch's EML product, refer to this section of the React Native deeplinking docs.