React Native SDK: Implementing Deep Links

Singular React Native SDK 
Download
Singular React Native SDK version 3.1.11 (see Change Log)
Compatibility  React Native 0.46.4+
Integration Guides
  1. Basic Integration
  2. Tracking Events and Revenue
  3. Implementing Deep Links
  4. Adding SKAdNetwork Support
  5. Advanced Options

 

Introduction

Deep links are links that lead into specific content inside an app. When a user clicks a deep link on a device that has the app installed, the app opens and shows a specific product or experience.

Singular tracking links can include deep linking as well as deferred deep linking (see our Deep Linking FAQ and the Singular Links FAQ for more information).

The instructions below will show you how to:

  1. Access the tracking link that led to your app being opened,
  2. Read the deep link destination, and
  3. Show the appropriate content.

Note: This article assumes your organization is using Singular Links - Singular's new tracking link technology, launched in 2019.

Older customers of Singular may be using Singular's older tracking links. See Generating Links [Legacy Tracking Links].

Enabling Singular Links

To enable Singular Links in iOS and in Android, see Singular Links Prerequisites.

Handling Singular Links

The Singular SDK provides a handler mechanism to read the details of the tracking link that led to the app being opened.

To use the handler:

  1. Call withSingularLinks when you create the SingularConfig object, as in the example below. This registers a Singular Links handler.
  2. Inside the handler, call or define a callback function that receives a SingularLinksParams object, as in the example below. The SingularLinksParams object contains the following fields:
    • deeplink - the deep link address. This is what you need to parse in order to show the users the right product or experience.
    • passthrough - any pass-through parameters added to the deep link.
    • isDeferred - true if this is a deferred deep link.
const config = new SingularConfig('<SDK KEY>', '<SDK SECRET>');
config.withSingularLink(singularLinksParams => {
    const deeplink = singularLinksParams.deeplink;
    const passthrough = singularLinksParams.passthrough;
    const isDeferred = singularLinksParams.isDeferred;
    // Add your code here to handle the deep link
});
Singular.init(config);

Setting Up Prerequisites

iOS Prerequisites

In the project’s AppDelegate.m, add the following:

// Top of the AppDelegate.m
#import <Singular-React-Native/SingularBridge.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Add inside didFinishLaunchingWithOptions
  [SingularBridge startSessionWithLaunchOptions:launchOptions];
  return YES;
}

// Add this method to the app delegate
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id> * _Nullable))restorationHandler{
  [SingularBridge startSessionWithUserActivity:userActivity];
  return YES;
}

Android Prerequisites

In the project’s MainActivity.java, add the following:

// Add as part of the imports at the top of the class
import net.singular.react_native.SingularBridgeModule;

@Override
public void onNewIntent(Intent intent) {
super.onNewIntent(intent);
SingularBridgeModule.onNewIntent(intent);
}