さいとブログ

ReactNativeでFirebaseのDynamicLinksというサービスを使い、
URL からアプリを起動する機能を実装して、検証や設定など手順を忘れないために記事として残します。

環境

"react-native": "0.64.0"
"@react-native-firebase/app": "^12.7.4"
"@react-native-firebase/dynamic-links": "^12.7.4"
"@react-native-firebase/analytics": "^12.7.4"

Firebaseのライブラリはyarn or npmでインストールします。

ざっくりと動かすまでの手順

• AndroidアプリをFirebaseプロジェクトに追加
• DynamicLinksの作成
• イベントの受信
• Androidエミュレータでの検証

実装方法

アプリの登録

ここでは以下の内容を行う形になります。

• アプリのパッケージ名を確認して登録する
• SHA-256の証明書を登録する

基本的には、Firebaseのドキュメントに載っているので、特に詰まることはないのですが、DynamicLinksを使う場合にはSHA-256の登録が必要になることだけ忘れないようにすればいいと思います。

アプリのパッケージ名はandroid/app/arc/main/AndroidManifest.xmlに書いてあるパッケージ名を登録します。

<manifest xmlns:android=
 package=パッケージ名>

SHA-256の証明書登録は./gradlew signingReportのコマンドで確認できます。
あとは、適当に登録すれば問題ないです。

DynamicLinksの作成

サイドバーからDynamicLinksを開いて、ディープリンクとダイナミックリンク名、Android の定義のところでAndroidアプリ内でディープリンクを開くにFirebaseに登録したアプリを選択する。

今回はGoogleで提供している無料のドメインを使います。
[任意のドメイン].page.link

今回は最低限上記の設定を行うだけで良いです。

イベントの受信

ここまで終わったら、後はコードを書いて検証するだけです。
アプリがフォアグラウンドで実行中の時にイベントを受け取り、指定のページに遷移させます。

// DynamicLink.js
import React, { useEffect } from 'react';
import dynamicLinks from '@react-native-firebase/dynamic-links';
import { useNav } from 'rn/src/hooks/useNav';

export const DynamicLink = ({ children }) => {
 const { navigate } = useNav();

 const handleDynamicLink = (link) => {
  if (link.url === リンク名) {
   // ページ遷移
  }
 };

 useEffect(() => {
  const unsubscribe = dynamicLinks().onLink(handleDynamicLink);

  return () => unsubscribe();
 }, []);

 return　null;
};

あとは先程のコンポーネントを最上位のApp.jsで呼ぶだけです。

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { Navigation } from 'rn/src/app/Navigation';
import { DynamicLink } from 'rn/src/app/DynamicLink';

export const App = () => {
 return (
  <RecoilRoot>
   <NavigationContainer>
    <DynamicLink />
    <Navigation />
   </NavigationContainer>
  </RecoilRoot>
 );
};

エミュレータでの検証

検証の手順ですが、下記の流れでアプリが起動したら検証完了です。

• Androidエミュレータの起動
• GmailなどにダイナミックリンクのURLを送る
• リンクをタップして開く

最後に

実際に使ってみると、結構簡単に実装できました。
これを機にFirebaseをいろいろ触っていきたいと思います。

参考

公式
ダイナミックリンク
SHA 証明書