How to build custom deep links in an Expo-based mobile app

...

// Function to parse the deep link and get the hostname and queryParams
function parseSwapDeeplink(url: string): SwapDeeplinkParams | null {
  try {
    const { hostname, queryParams } = Linking.parse(url);
    
    if (hostname !== 'swap' || !queryParams) {
      return null;
    }

    return {
      from: queryParams.from as string | undefined,
      to: queryParams.to as string | undefined,
      amount: queryParams.amount as string | undefined,
    };
  } catch (error) {
    console.error('Error parsing deeplink:', error);
    return null;
  }
}

function DeeplinkHandler({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  
  useEffect(() => {
    
    const handleDeeplink = (url: string) => {
      // Parse the deep link and get the params (host, path, params etc...)
      const params = parseSwapDeeplink(url);
      if (params) {
        // The example here makes the params globally accessible in the app, however you can use React Context or similar to make the params accessible from anywhere in the app.
        (global as any).swapDeeplinkParams = params;
        // Based on the path or host you can redirect the user to the respective screen in the app 
        router.replace('/');
      }
    };

    // Handle initial URL
    Linking.getInitialURL().then(url => url && handleDeeplink(url));

    // Create an event listener and handle URL changes while app is open
    const subscription = Linking.addEventListener('url', event => handleDeeplink(event.url));

    // Removes the event listener when the component is destroyed (avoids memory leaks)
    return () => subscription.remove();
  }, [router]);

  return <>{children}</>;
}


export default function Layout() {
    ...

    return (
        <DeeplinkHandler>
            <App />
        </DeeplinkHandler>
    );
 }