「react-native-gifted-chat」ライブラリを使ってチャット機能をアプリに実装した際、個人的にこれは設定しなければ！というオプションやスタイルがあったので、自分のためにまとめ。
ライブラリの GitHub ページはこちらから。
FaridSafi/react-native-gifted-chat: 💬 The most complete chat UI for React Native
https://github.com/FaridSafi/react-native-gifted-chat
まず、keyboardShouldPersistTaps。
こちらは React Native の ScrollView の keyboardShouldPersistTaps と同じで、スクロールビューのエリアをタップした時に、キーボードを自動的に閉じるかどうかを指定できます。
こちらを指定していない状態だと、メッセージ入力欄をタップしてキーボードを表示した後、過去のチャット一覧が表示されているエリアをタップした時にキーボードが閉じません。
LINE だとチャット一覧のエリアをタップするとキーボードが閉じるようになっているので、個人的には戸尻ようにした方が自然かなと思います。
キーボードを閉じる処理を有効にしたい場合は keyboardShouldPersistTaps='never' を追加します。
次に alignTop です。
こちらはデフォルトだと false なのですが、その場合、メッセージの吹き出しが下から埋まっていきます。
上の GitHub のページの最初の方にチャット画面のサンプルがあるのですが、見てわかる通り、デフォルトだと追加したメッセージが下から埋まっていきます。
これを上から埋まっていくようにしたい場合は alignTop={true} を追加します。
こちらもその人の好みによると思いますが…個人的には上から吹き出しが埋まっていって欲しかったので追加しました。
3つ目は dateFormat です。
こちらも好みだと思いますが、システムで表示される日付の表示形式を設定できます。
例えば、昨日と今日に投稿されたメッセージ吹き出しの間に自動で追加される日付ですね。
デフォルトは ll なので、2021年5月14日 のようになります。
が、個人的に年の表示は要らないかな…と思ったので、dateFormat='M月D日' と指定して、年の表記を無くしました。
最後が messagesContainerStyle です。
こちらは GiftedChat コンポーネントのソースを見て、存在に気付いた設定です。
描画時に、<GiftedChat> コンポーネントを <SafeAreaView> で囲んでいるのですが、背景色を設定するときに、SafeAreaView の方に指定してしまうと、iPhone X 以降のノッチのあるデザインの端末で表示した際、入力欄の下に隙間ができてしまうのですよね。
背景色が白などなら分からないと思うのですが、現在開発中のアプリだと背景色が黄色、入力エリアは白色なので、下の余分なスペースが目立つこと…。
ですが、messagesContainerStyle で背景色：黄色を設定し、SafeAreaView の方で背景色：白色を指定したところ、目論見通り、画面下の余白が白くなり、余白がある事が目立たなくなりました！
こちらを覚えておくとノッチの隙間に悩まされなくなるかもしれません。
以上、React Native でチャットページを簡単に実装できるライブラリ「react-native-gifted-chat」で、個人的にやや必須だと思う設定でした。
もちろん、開発する機能によっては不要なものもあると思いますが、見た目を整えるときに、上記 4つはよく使うのではないかと思います。
完全主観で選んだ設定一覧ですが、ご参考になれば幸いです。
