【React Native】チャット画面を簡単に作成できるライブラリ「react-native-gifted-chat」

これは本当に便利だったので全力でご紹介！
React Native でチャットページを簡単に作成できるライブラリ「react-native-gifted-chat」です。

GitHub のページはこちらから。

GitHub – FaridSafi/react-native-gifted-chat: 💬 The most complete chat UI for React Native
https://github.com/FaridSafi/react-native-gifted-chat

まず、ライブラリを下記のコマンドでインストールします。

npm install react-native-gifted-chat --save

上記が完了したら、プロジェクトの任意の場所でインポートして使用します。

import { GiftedChat } from 'react-native-gifted-chat'

チャットメッセージの一覧は、state の messages で管理しています。
ちなみに初期値は [] です。
で、送信ボタンが押された時の処理は下記のとおりです。

sendMessage(message) {
  let messages = this.state.messages;
  messages = message.concat(messages);
  this.setState({ messages: messages });
}

最後に、render の return には下記を追加します。

<GiftedChat
  messages={this.state.messages}
  onSend={messages => this.sendMessage(messages)}
  user={{
    _id: 1,
  }} />

最低限追加しなければいけないのは以上です！
こちらを追加して実行すると、Facebook の Messenger や Twitter の DM によく似た UI のチャット画面を実装することができます！

が、個人的には日付を日本語表記にしたいのと、入力欄や送信ボタンの見た目を変更したかったので、最終的に下記のようになりました。

import 'dayjs/locale/ja';
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  sendArea: {
    backgroundColor: 'rgba(240, 131, 0, 0.2)',
  },
  sendInput: {
    borderWidth: 0.5,
    borderColor: 'gray',
    borderRadius: 15,
    marginRight: 10,
    padding: 10,
    backgroundColor: '#FFF',
  },
  sendButton: {
    backgroundColor: '#F08300',
    color: '#FFF',
    padding: 10,
    borderRadius: 10,
    margin: 5,
    marginLeft: 0,
    height: 34,
  }
});

sendMessage(message) {
  let messages = this.state.messages;
  messages = messages.concat(message);
  this.setState({ messages: messages });
}
renderSendButton(props) {
  return <Send {...props}><Text style={styles.sendButton}>送信</Text></Send>
}

<GiftedChat
  messages={this.state.messages}
  onSend={this.sendMessage}
  user={{ _id: 1 }}
  locale='ja'
  placeholder='メッセージを入力してください'
  renderUsernameOnMessage={true}
  textInputProps={{ selectionColor: "#F08300" }}
  renderSend={this.renderSendButton}
  containerStyle={styles.sendArea}
  textInputStyle={styles.sendInput} />

入力エリアの背景色を薄いオレンジに変更し、メッセージ入力欄には枠線を追加し角を丸め、さらに送信ボタンをオレンジ色にして、テキストを「送信」に変更しています。
また、import 'dayjs/locale/ja'; を追加し、locale='ja' を指定することで、日付の表記を日本語にしています。

あとは、自分の吹き出しの色を青からオレンジに変更したいのですが…こちらは吹き出しコンポーネントそのものを指定しなければいけないようなので、ちょっとどうしようかな…と迷っています。
背景色を変えたいだけなのですが…。
こちらはこれから調整していきたいと思います。

以上、React Native でチャット画面を簡単に実装できるライブラリ「react-native-gifted-chat」のご紹介でした。
基本的なチャット画面を作るのは本当に簡単だったので超お勧めです。
ご参考になれば幸いです。