React NativeでUniversal Links (iOS)・App Links (Android)のURLを取得する方法

概要

React NativeアプリでUniversal Links（iOS）やApp Links（Android）を利用する際、アプリがどの状態で起動されたかによってURLの取得方法が異なります。
本記事では、以下の2つのケース（cold start/warm start）でのURL取得方法について解説します。

1. Cold Start（アプリが完全に終了している状態から起動）

アプリがバックグラウンドにも存在せず、完全に終了している状態でリンクから起動した場合、Linking.getInitialURL() を使って起動時のURLを取得します。

import { useEffect } from 'react';
import { Linking } from 'react-native';

const useInitialURL = () => {
  useEffect(() => {
    const handleInitialURL = async () => {
      const url = await Linking.getInitialURL();
      if (url) {
        console.log('Initial URL:', url);
        // ここでURLに応じた画面遷移などを実装
      }
    };
    handleInitialURL();
  }, []);
};

2. Warm Start（アプリが起動中・バックグラウンドから復帰）

アプリがすでに起動している場合やバックグラウンドから復帰した場合は、Linking.addEventListener('url', ...) で新しいURLを検知します。

import { useEffect } from 'react';
import { Linking } from 'react-native';

const useDeepLinkListener = () => {
  useEffect(() => {
    const linkingSubscription = Linking.addEventListener('url', ({ url }) => {
      console.log('Received URL:', url);
        // ここでURLに応じた画面遷移などを実装
    });
    return () => {
      linkingSubscription.remove();
    };
  }, []);
};

Expo Managed Workflowで、かつ、Androidの場合は、以下リンク先の設定も必要になります。
https://zenn.dev/stucci/articles/expo-deeplink-setintent

---

参考:
https://nearform.com/insights/enhancing-user-experience-with-universal-links-ios-and-deep-links-android-by-using-react-native/