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