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>
  );
}