How to do Deferred Deep Linking on React Native and Expo

Deferred deep linking is a powerful technique that allows you to direct users to specific content within your app, even if they need to install the app first. It's essential for creating seamless user experiences, especially when sharing links on social media, in email campaigns, or through other channels. This guide will show you how to implement deferred deep linking in your React Native and Expo apps using the DeepLinkNow React Native SDK.

What is Deferred Deep Linking? (A Quick Recap)

Imagine this scenario:

1. A user sees a link to a specific product in your app on social media.
2. They click the link, but they don't have your app installed.
3. They're taken to the App Store or Google Play Store to install your app.
4. After installing and opening the app, they're automatically taken to the product page they originally clicked on, not just the app's home screen.

That's deferred deep linking in action! It's "deferred" because the deep linking happens after the app installation.

The challenge, as we discussed in our previous blog post, is that app stores don't provide a way to pass data directly to the installed app. This is where cloud fingerprinting comes in (see the previous post for a detailed explanation).

DeepLinkNow: The Simple Solution

DeepLinkNow provides a streamlined way to implement deferred deep linking without the bloat and complexity of traditional attribution platforms. Our React Native SDK is lightweight, easy to integrate, and respects user privacy. Crucially, it's also fully compatible with Expo, without requiring you to eject or rebuild your app.

Setting up the DeepLinkNow React Native SDK

Let's get started!

1. Installation:

If you're using the React Native CLI:

npm install react-native-deeplinknow
# or
yarn add react-native-deeplinknow

If you're using Expo:

expo install react-native-deeplinknow

2. Expo Config Plugin (Expo Only):

Add the config plugin to your app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "react-native-deeplinknow",
        {
          "apiKey": "your-api-key-here"
        }
      ]
    ]
  }
}

Replace "your-api-key-here" with your actual DeepLinkNow API key (you can get this from your DeepLinkNow dashboard). This config plugin handles the necessary native configurations for you.

3. iOS Setup (React Native CLI Only):

If you are using the React Native CLI, you will need to add the following to your Podfile:

pod 'DeepLinkNow'

Then run:

cd ios && pod install

4. Initialization:

Import and initialize the SDK early in your app, ideally in your root component (e.g., App.tsx or App.js):

import DeepLinkNow from "react-native-deeplinknow";

DeepLinkNow.initialize("your-api-key-here"); // Use your API key

5. Handling Deep Links:

Use the addDeepLinkListener function to listen for incoming deep links:

import { useEffect } from "react";
import DeepLinkNow from "react-native-deeplinknow";

function App() {
  useEffect(() => {
    const unsubscribe = DeepLinkNow.addDeepLinkListener((data) => {
      console.log("Path:", data.path);
      console.log("Parameters:", data.parameters);

      // Handle the deep link based on the path and parameters
      if (data.path.startsWith("/product/")) {
        const productId = data.path.split("/")[2];
        // Navigate to your product screen using your navigation library (e.g., React Navigation)
        // navigation.navigate("Product", { productId });
      }
    });

    // Clean up the listener when the component unmounts
    return () => unsubscribe();
  }, []);

  // ... rest of your app
}

This code sets up a listener that will be called whenever a deep link is opened. The data object contains the path (e.g., "/product/123") and any parameters associated with the link. You can then use this information to navigate to the appropriate screen in your app. The useEffect hook ensures that the listener is cleaned up when the component unmounts, preventing memory leaks.

6. Checking for Deferred Deep Links:

When your app launches, you should check for a deferred deep link:

const checkDeepLink = async () => {
  const { url, attribution } = await DeepLinkNow.checkDeferredDeepLink();

  if (url) {
    console.log("Deferred deep link:", url);
    // Handle the deferred deep link (same logic as in addDeepLinkListener)
  }

  if (attribution) {
    console.log("Attribution data:", attribution);
    // You can use attribution data for analytics or other purposes
  }
};

// Call checkDeepLink in your app's initialization logic
checkDeepLink();

This function checks if the app was opened via a deferred deep link. If so, it returns the url and attribution data. You can handle the deferred deep link using the same logic you use for regular deep links.

7. Creating Deep Links: You can create deep links programmatically:

const customParams = {
  referrer: "social_share",
  is_promo: true,
  discount: 20,
};

const deepLink = await DeepLinkNow.createDeepLink("/product/123", customParams);
console.log(deepLink);
// Result: deeplinknow://app/product/123?referrer=social_share&is_promo=true&discount=20

8. Clipboard Deep Links: You can also check the clipboard for deep links:

const checkClipboard = async () => {
  const clipboardLink = await DeepLinkNow.checkClipboard();
  if (clipboardLink) {
    // Handle clipboard deep link
  }
};

No Native Code, No Rebuilds!

One of the biggest advantages of the DeepLinkNow React Native SDK is that it doesn't require any native code changes (beyond the initial setup). This means you can add deferred deep linking to your Expo app without ejecting and without needing to rebuild your app through Xcode or Android Studio. This significantly simplifies the development process and allows for faster iteration.

Conclusion

Deferred deep linking is a powerful tool for improving user experience and driving app engagement. With DeepLinkNow, you can implement it easily and efficiently in your React Native and Expo apps, without the headaches of complex integrations or invasive tracking. Our SDK provides a simple, privacy-respecting solution that works seamlessly across both iOS and Android.