Usage Patterns
Choose from three flexible integration patterns: Singleton, Hook, or Provider. Select the one that best fits your app's architecture and complexity.
Singleton API: DeepLinkManager
Best for complex apps that manually manage subscription lifecycles, need fine-grained control, or for use inside testing environments.
typescript
import { DeepLinkManager } from '@apliko/react-native-deep-link';
// Get the singleton instance
const instance = DeepLinkManager.getInstance();
// (Optional) Enable logging for debugging
instance.setLogging(true);
// Subscribe to deep link events
const unsubscribe = instance.addUrlListener((url, data) => {
console.log('Received deep link:', url);
});
// Retrieve the initial link that launched the app (if any)
const initialUrl = instance.getInitialUrl();
if (initialUrl) {
console.log('Launched from link:', initialUrl);
}
// Later, unsubscribe to prevent memory leaks
unsubscribe();
Hook API: useDeepLink (Recommended)
The recommended approach for most functional components. It's clean, automatically handles the subscription lifecycle (subscribing on mount and unsubscribing on unmount), and integrates seamlessly with React's architecture.
tsx
import { useDeepLink } from '@apliko/react-native-deep-link';
export function HomeScreen() {
// Automatically subscribes and unsubscribes
useDeepLink((url, data) => {
if (url) {
// Navigate to a specific screen based on the URL
console.log('Deep link received:', url, data);
}
});
return null; // Or your component JSX
}
Provider API: DeepLinkProvider
Ideal for centralized, app-wide deep link handling. Wrap your root component with the provider to listen for links anywhere in your application without needing to use hooks in specific components.
tsx
import { DeepLinkProvider } from '@apliko/react-native-deep-link';
function App() {
return (
<DeepLinkProvider
enableLogging={true} // Optional: Enable logging globally
onLink={(url, data) => {
// Handle all deep links globally from here
console.log('Global deep link:', url, data);
}}
>
{/* Your App's Component Tree */}
</DeepLinkProvider>
);
}