DeepLinkNow React Native SDK

DeepLinkNow React Native SDK provides a cross-platform solution for deep linking and attribution in React Native applications. The SDK wraps our native Android and iOS SDKs, providing a consistent API for both platforms.

Requirements

React Native 0.60.0+
iOS 13.0+
Android API level 21+ (Android 5.0+)

Installation

Install the SDK using npm or yarn:

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

Expo Configuration

If using Expo, add the config plugin to your app.json/app.config.js:

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

Deep Linking

The SDK provides comprehensive deep linking capabilities:

Creating Deep Links

Create deep links with custom parameters:

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

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

Handling Deep Links

Listen for and handle incoming deep links:

// Listen for deep links
const unsubscribe = DeepLinkNow.addDeepLinkListener((data) => {
  console.log("Path:", data.path);
  console.log("Parameters:", data.parameters);

  // Handle the deep link
  if (data.path.startsWith("/product/")) {
    const productId = data.path.split("/")[2];
    const referrer = data.parameters.referrer;
    const isPromo = data.parameters.is_promo;
    const discount = data.parameters.discount;

    navigateToProduct({
      id: productId,
      referrer,
      isPromo,
      discount,
    });
  }
});

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

Deferred Deep Linking

Handle deferred deep links during app launch:

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

  if (url) {
    console.log("Deferred deep link:", url);
    // Handle the deep link
  }

  if (attribution) {
    console.log("Channel:", attribution.channel);
    console.log("Campaign:", attribution.campaign);
    console.log("Install Time:", attribution.installTimestamp);
  }
};

Clipboard Deep Links

Check clipboard for deep links:

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

TypeScript Support

The SDK includes TypeScript definitions for all features:

interface DLNCustomParameters {
  [key: string]: string | number | boolean;
}

interface DLNAttribution {
  channel?: string;
  campaign?: string;
  medium?: string;
  source?: string;
  clickTimestamp?: Date;
  installTimestamp: Date;
}

interface DeepLinkData {
  path: string;
  parameters: DLNCustomParameters;
}

Platform-Specific Configuration

The SDK provides platform-specific configuration options:

iOS

Add to Info.plist:

<key>NSPasteboardUsageDescription</key>
<string>We need access to the clipboard to check for deep links</string>

Android

The SDK automatically handles Android configuration through the React Native module.

Best Practices

Follow these best practices for optimal SDK usage:

Early Initialization

Initialize the SDK as early as possible in your app

Listener Cleanup

Always clean up deep link listeners in useEffect

Error Handling

Implement proper error handling for async operations

TypeScript

Use provided TypeScript types for better development experience