React Native Deep Linking with React Navigation v6: Complete Tutorial

interface RootStackParamList {
  Home: undefined;
  Product: { id: string };
  Cart: { items?: string[] };
  Profile: { userId: string };
  Settings: { section?: string };
}

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      // Exact matches
      Home: '',

      // Dynamic parameters
      Product: 'product/:id',

      // Multiple parameters
      Cart: 'cart/:itemId',

      // Optional parameters
      Profile: 'user/:userId',
      Settings: {
        path: 'settings/:section?',
        parse: {
          section: (section: string) => section?.toLowerCase(),
        },
      },

      // Nested navigators
      Account: {
        screens: {
          Orders: 'account/orders',
          Wishlist: 'account/wishlist/:categoryId?',
        },
      },

      // Fallback for unmapped routes
      NotFound: '*',
    },
  },
};

import { NavigationContainer } from '@react-navigation/native';
import { useEffect } from 'react';
import Redirectly from '@redirectly/react-native';

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: '',
      Product: 'product/:id',
      User: 'user/:userId',
    },
  },
  // Custom async handler for deferred deep links
  async getInitialURL() {
    // 1. Check if app was opened from a deep link (cold start)
    const url = await Linking.getInitialURL();
    if (url != null) {
      return url;
    }

    // 2. Check Redirectly for deferred deep link
    try {
      const redirectlyUrl = await Redirectly.getInitialURL();
      return redirectlyUrl;
    } catch (error) {
      console.error('Error fetching from Redirectly:', error);
    }

    // 3. Default to home screen
    return undefined;
  },
};

function RootNavigator() {
  useEffect(() => {
    // Handle deep links when app is already running
    const unsubscribe = Linking.addEventListener('url', ({ url }) => {
      // Use React Navigation to navigate
      const route = url.replace(/.*?:/\//, '');
      // Navigation logic here
    });

    return unsubscribe.remove;
  }, []);

  return (
    <NavigationContainer linking={linking}>
      {/* Navigation stacks */}
    </NavigationContainer>
  );
}