Linking API and URL Parsing
Use the Linking API to listen for incoming URLs while the app is running, parse the URL's path and query parameters, and dispatch a navigation action.
The Linking Module Overview
React Native's built-in Linking module is the interface between your app and the operating system's URL handling system. It serves two purposes: outgoing — opening URLs in browsers, maps, email, phone, and other apps; and incoming — receiving URLs that were used to open your app.
For deep linking to work correctly you need to handle both the cold-start case (app launched by a URL) and the warm-start case (URL arrives while the app is already running). The Linking module provides different APIs for each scenario.
import { Linking } from 'react-native';
// Outgoing:
Linking.openURL('https://example.com');
// Check if URL can be opened:
Linking.canOpenURL('myapp://screen').then(Boolean);
// Incoming - cold launch:
Linking.getInitialURL();
// Incoming - while running:
Linking.addEventListener('url', ({ url }) => {});Comprehensive URL Listener Setup
The recommended pattern handles both cold and warm starts in a single effect. Read getInitialURL() for the cold launch URL and add a listener for warm-start URLs. Both call the same handleURL function to keep routing logic in one place.
Place this effect in your root navigation component or a custom useDeepLink hook so it runs when navigation is available and is properly cleaned up when the component unmounts.
useEffect(() => {
function handleURL(url) {
if (url) routeDeepLink(url);
}
// Cold launch URL:
Linking.getInitialURL().then(handleURL);
// Warm launch URL:
const sub = Linking.addEventListener('url', ({ url }) => handleURL(url));
return () => sub.remove();
}, []);