NativeとFirebaseを使って簡単なチャットのサンプルを作ってみました。Firebaseを使います。Kitを使ってプロジェクトの雛形を作ります。https://github.com/invertase/react-native-firebase-starter.gitクローンしたディレクトに移動して依存モジュールをインストールします。iCocoaPodsでiosのモジュールをインストールします。installプロジェクトをリネームします。プロジェクトのルートディレクトリにて以下を実行します。プロジェクトの名前とカンパニーの名前を聞かれるので入力します。renameプロジェクト名ReactNativeSample、カンパニー名kwstにすると、エラーが出ました。code.プロジェクト名ReactNativeSample、カンパニー名Kwstを入力するといけました。以下の情報が表示されました。nameはFirebaseの設定で使うそうなので控えておきます。com.kwst.reactnativesampleFirebaseの設定Firebaseの基本的な設定方法は以前の記事『FlutterアプリをFirebaseと連携させる』と似たような要領です。nameであるcom.kwst.reactnativesampleを入力します。GoogleService-Info.plistをダウンロードしてきて/iosディレクトリに配置します。"ReactNativeSample"でGoogleService-Info.plistを選択してプロジェクトに追加します。バンドルIDは先程のcom.kwst.reactnativesampleを入力します。今回はログイン方法をメール/パスワードと匿名の2つをONにします。チャットデータのスキーマはこのような感じにしました。後述のGiftedChatのメッセージデータに合わせたものになっています。GiftedChatReactNativeでチャットUIをお手軽に提供してくれるライブラリreact-native-gifted-chatを使ってみます。react-native-gifted-chatコンポーネントの使い方はこんな感じです。これだけでチャットUIを実装できます。user={ユーザオブジェクト}/>メッセージオブジェクトのインターフェースは以下のようになっています。User;}ユーザオブジェクトのインターフェースは以下の通り。tslibでインストールしておきます。map出来上がったチャット画面はこんな感じです。Elementsを使ってみました。一通りのUIコンポーネントが揃っています。react-native-vector-icons出来上がったログイン画面はこんな感じです。kwst.site.。