React Native - Receive Dynamic Links
Learn how to handle incoming dynamic links in your React Native app using the ChottuLink SDK.
🔧 Prerequisites
Before implementing dynamic link reception, ensure you have:
🔗 Set up Event Listeners
- React Native SDK (Recommended)
- Nitro Modules SDK
import { handleLink } from 'react-native-chottulink-sdk';
import { Linking } from 'react-native';
useEffect(() => {
const handleInitialURL = async () => {
const initialUrl = await Linking.getInitialURL();
if (initialUrl) {
handleLink(initialUrl);
}
};
handleInitialURL().then();
}, []);
useEffect(() => {
const subscription = Linking.addEventListener('url', event => {
handleLink(event.url);
});
return () => subscription?.remove();
}, []);
import { handleLink } from 'chottulink-rn-sdk';
import { Linking } from 'react-native';
useEffect(() => {
const handleInitialURL = async () => {
try {
const initialUrl = await Linking.getInitialURL();
if (initialUrl) {
console.log('App opened from link:', initialUrl);
handleLink(initialUrl);
}
} catch (error) {
console.error('Failed to get initial URL:', error);
}
};
handleInitialURL();
}, []);
useEffect(() => {
const subscription = Linking.addEventListener('url', (event) => {
console.log('Foreground link received:', event.url);
handleLink(event.url);
});
return () => subscription?.remove();
}, []);
📱 Handling Incoming Links
- React Native SDK (Recommended)
- Nitro Modules SDK
import { NativeEventEmitter, NativeModules } from 'react-native';
const { ChottuLinkEventEmitter } = NativeModules;
const eventEmitter = new NativeEventEmitter(ChottuLinkEventEmitter);
// Called when a deep link or deferred link is successfully resolved
const deepLinkSubscription = eventEmitter.addListener(
'ChottuLinkDeepLinkResolved',
data => {
// Tip: ➡️ Navigate to a specific page or take action based on the link
console.log('Deep link resolved:', data);
console.log('URL:', data.url);
console.log('Metadata:', data.metadata);
// Metadata structure (available since v1.0.5+):
// - isDeferred: boolean Indicates if the link is deferred
// - originalURL: string The resolved destination URL (may be null if not found)
// - resolvedAt: string Timestamp when the link was resolved
// - shortLinkRaw: string The deeplink url which was clicked with all the parameters intact
},
);
// Called when there's an error resolving the deep link
const deepLinkErrorSubscription = eventEmitter.addListener(
'ChottuLinkDeepLinkError',
data => {
console.log('Deep link error:', data);
console.log('Original URL:', data.originalURL);
console.log('Error:', data.error);
},
);
import { onDeepLinkResolved, onDeepLinkFailed } from 'chottulink-rn-sdk';
// Called when a deep link or deferred link is successfully resolved
onDeepLinkResolved((event) => {
console.log('Deep link resolved:', event.url);
console.log('Metadata:', event.metadata);
// Tip: ➡️ Navigate to a specific page or take action based on the link
handleDeepLinkNavigation(event.url, event.metadata);
});
// Called when there's an error resolving the deep link
onDeepLinkFailed((event) => {
console.log('Deep link failed:', event.error);
console.log('Error code:', event.errorCode);
console.log('Original URL:', event.originalUrl);
// Handle the error appropriately
handleDeepLinkError(event);
});
(Optional) Get AppLink Data from the Deeplink URL directly
You can also resolve link data from ChottuLink URLs programmatically:
- React Native SDK (Recommended)
- Nitro Modules SDK
import { getAppLinkDataFromUrl } from 'react-native-chottulink-sdk';
try {
const linkData = await getAppLinkDataFromUrl('https://your-domain.chottu.link/abc123');
console.log('Link data:', linkData);
} catch (error) {
console.error('Failed to extract link data:', error);
}
import { getAppLinkDataFromUrl } from 'chottulink-rn-sdk';
const resolveLinkData = async (url: string) => {
try {
const resolvedData = await getAppLinkDataFromUrl(url);
console.log('Original link:', resolvedData.link);
console.log('Short link:', resolvedData.shortLink);
return resolvedData;
} catch (error) {
console.error('Failed to resolve link data:', error);
throw error;
}
};