【React Native】React Native Firebaseでチャット機能を実装する

ちょっと感動したので備忘録としてまとめ。
React Native Firebase の Realtime Database を使って、チャット機能を実装する方法についてです。
なお、チャット画面については、先日紹介した「react-native-gifted-chat」を使用しました。

公式サイトはこちらから。

React Native Firebase | React Native Firebase
https://rnfirebase.io/

まずは、ライブラリのインポートから行います。
事前準備として、Firebase のコンソールにて、新しいプロジェクトを作成し、google-services.json と GoogleService-Info.plist を発行しておいてください。
次に、下記コマンドを実行して、インストールを行ってください。

npm install --save @react-native-firebase/app

ライブラリのインストールが終わったら、Android、iOS ごとに設定が必要なのですが、こちらについては公式サイトが一番わかりやすいと思うので、割愛させていただきます。

なお、私の環境では Android にて「Cannot fit requested classes in a single dex file」というエラーが発生しました。
私の場合、build.gradle ファイルに multiDexEnabled true という記述を追加したら修正できましたので、同じエラーが発生した場合は参考にしてください。
参考にさせていただいた記事はこちらです。

[Android]Android 64k問題を回避するための設定方法(Cannot fit requested classes in a single dex file / Too many field references) – みんなのプログラミング by Telulu LLC
https://minpro.net/android-64k-problems

上記の設定が終わったら、一旦アプリを実行してみて、エラーが発生しないかどうかお確かめください。
無事にアプリが実行出来たら、今度は下記のコマンドを実行して、Realtime Database のライブラリをインストールします。

npm install @react-native-firebase/database --save

上記が完了したら、下記のサンプルコードを参考にチャットページを実装します！

import React, { Component } from 'react';
import { SafeAreaView } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';
import 'dayjs/locale/ja';
import database from '@react-native-firebase/database';
import moment from 'moment';

const reference = database().ref('/users/123');
class MessagePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: [],
    }
    this.sendMessage = this.sendMessage.bind(this);
  }
  componentDidMount() {
    const that = this;
    database()
      .ref('/group/123')
      .on('value', snapshot => {
        that.setState({ messages: snapshot.val() ? snapshot.val().messages : [] });
      });
  }
  sendMessage(rawData) {
    const message = {
      _id: rawData[0]['_id'],
      text: rawData[0]['text'],
      user: rawData[0]['user'],
      createdAt: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
    };
    let messages = this.state.messages;
    messages = messages.concat(message);
    this.setState({ messages: messages });
    database()
      .ref('/group/123')
      .set({
        messages: messages,
      });
  }
  render() {
    return (
      <SafeAreaView>
        <GiftedChat
          messages={this.state.messages}
          onSend={this.sendMessage}
          user={{
            _id: 1,
            name: '田中太郎',
            avatar: 'https://cpoint-lab.co.jp/wp-content/uploads/2019/07/cameraimgl9942_tp_v.jpg'
          }}
          locale='ja'
          placeholder='メッセージを入力してください'
          inverted={false}
          renderUsernameOnMessage={true}
          renderAvatarOnTop={true}
          alwaysShowSend={true} />
      </SafeAreaView>
    );
  }
}
export default MessagePage;

テキストメッセージを送り合うことしかできませんが、とりあえず基本的な機能はこれで実装できました！
試しに 2台端末を用意し、片方の端末でメッセージを送信したところ、もう一方のチャット画面にもメッセージがリアルタイムで表示されることが確認できました！
チャット機能って今まで開発したことがなかったので、こうしてリアルタイムで画面が更新されると感動しますね…！

以上、React Native Firebase の Realtime Database を使用してリアルタイムチャットの機能を実装する方法についてでした。
ご参考になれば幸いです。