? Linking & Deep Linking in React Native

? Quick Overview

Linking and Deep Linking in React Native allow your app to open external URLs and also respond to custom URLs that open specific screens inside your app. This is essential for authentication flows, marketing campaigns, notifications, and cross-app navigation.

? Key Concepts

• Linking API handles URLs and deep links
• Deep links open specific screens inside the app
• Custom URL schemes and universal links are supported
• Works with Android Intents and iOS URL handling

? Syntax & Theory

React Native provides the Linking module to interact with URLs. It can:

• Open external websites
• Listen for incoming deep links
• Parse URL parameters

? Code Example(s)

// Import Linking API from react-native
import { Linking } from 'react-native';

// Open an external website
Linking.openURL('https://reactnative.dev');

// Listen for incoming deep links
useEffect(() => {
  const handleLink = (event) => {
    console.log(event.url);
  };

  // Add event listener
  Linking.addEventListener('url', handleLink);

  return () => {
    // Remove listener on cleanup
    Linking.removeEventListener('url', handleLink);
  };
}, []);

? Live Output / Explanation

? Interactive Example / Flow

Click the buttons below to simulate clicking an external link (e.g., from an email or another app) and see how the React Native app parses the route.

? Use Cases

• Password reset links
• Email verification
• Push notification navigation
• Marketing campaign links
• Cross-app communication