はじめに

React Native アプリから外部アプリを直接開く方法について調べたのでまとめます。

iOSとAndroidで若干異なるので注意が必要です。

外部アプリを起動するURLが必要

外部アプリを直接起動するためには、基本的に

独自のURLスキーム（slack://等）
ユニバーサルリンク

など予め外部アプリによって定められた起動URLを知っておく必要があります。

外部アプリを起動するURLを確認する

ググると情報が公開されている場合もありますが、そうで無い場合は自分で調べる or アプリ事業者に問い合わせる必要があります。

自分で起動するURLを確認する方法

自分で調べる場合、アプリを実際にインストールした上で、設定ファイルを確認します。

iOSの場合

以下のような手順になります。

iOS実機にアプリをインストール
PCにアプリをコピーする
Info.plistファイルを開く
CFBundleURLSchemesを確認する

1. iOS実機にアプリをダウンロード

普通にappstoreからインストールします

2. PCにアプリをコピーする

以前はitunesを使用してiPhoneからアプリデータを吸い出せたのですが、現在はアップデートでその機能がなくなっています。

外部アプリを利用したり、その他の方法でiPhoneからアプリデータを吸い出します。

私は「appSitter」というアプリを使用しました。（Mac）
（ストアアプリでは無いので、ご使用は自己責任でお願いいたします）

3. Info.plistファイルを開く

アプリは.ipa拡張子になっているので、.zipに変更し展開します。

アプリ名/payload/ディレクトリに.appファイルがあるので右クリック＋「パッケージの内容を表示」で開きます。

その中にInfo.plistファイルがあるのでエディタで開きます。

4. CFBundleURLSchemesを確認する

<key>CFBundleURLSchemes</key>
        <array>
          <string>myapp</string>
        </array>

上記のようにkey + valueになっているので、確認します。
複数設定されている場合もあります。

上記例の場合、myapp://でアプリを起動することができます。

Androidの場合

以下のような手順になります。

Android実機にアプリをインストール
PCにアプリをコピーする
AndroidManifest.xmlファイルを開く
CFBundleURLSchemesを確認する

1. Android実機にアプリをダウンロード

普通にストアからインストールします。

2. PCにアプリをコピーする

apkのパスを調べる

adb shell pm list packages -f | grep com.example.targetapp

得られたパスをもとにpullする

adb pull /data/app/com.example.targetapp-1/base.apk

3. AndroidManifest.xmlファイルを開く

Android　Studioなどで、apkファイルを開き、確認できる

intent-filterのURLSchemeを確認する

ただアプリを起動するだけなら、mainのintent-filterを確認する。

URLScheme: myapp
URLHost: app

となっている場合 myapp://appが起動URLとなる

アプリインストール済みの場合のみ起動URLを開くよう設定する

アプリが端末にインストールされていない場合、myapp://のような独自URLスキームへのアクセスは、意味の無いリクエストになってしまうので、

そのURLを開くことができるかどうかを判定してから実際にURLを開く必要がある。

Linking.canOpenURLを使用する

URLを開くことができる場合はtrue、ひらけない場合はfalseのPromiseを返す。

公式: https://reactnative.dev/docs/linking


const OpenURLButton = ({ url }) => {
  const handlePress = useCallback(async () => {
    // Checking if the link is supported for links with custom URL scheme.
    const supported = await Linking.canOpenURL(url);

    if (supported) {
      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
      // by some browser in the mobile
      await Linking.openURL(url);
    } else {
      Alert.alert(`Don't know how to open this URL: ${url}`);
    }
  }, [url]);

iOSは追加設定が必要

iOSでは、予め独自URLを許可しておかないとLinking.canOpenURLが常にfalseになってしまう。

info.plistのLSApplicationQueriesSchemesに許可するURLスキームを記述する

info.plistのInformation Property ListにLSApplicationQueriesSchemesを追加する
LSApplicationQueriesSchemesのTypeをArrayにする
Valueにxxxアプリのスキームを書く

まとめ

React Native アプリから外部アプリを直接開く方法についてまとまました。

独自URLスキームが必要
実機にインストールしたアプリから直接設定を調べることができる
Linking.canOpenURLで判定し処理を分ける必要がある
iOSの場合は許可するURLスキームを明示する必要がある

参考（ありがとうございます！）: