【React Native】「react-native-gifted-chat」ライブラリでメッセージ吹き出しの上部に送信者の名前を表示する

ちょっと苦戦したので備忘録としてまとめ。
タイトルにある通り、「react-native-gifted-chat」ライブラリを使って作成したチャットページで、メッセージ吹き出しの上部に送信者名を表示する方法についてです。
デフォルトの機能で、送信者名を表示する場合には、renderUsernameOnMessage={true} の設定を追加するのですが、こちらを有効にした場合、送信者名は吹き出しの中に表示されます。
デザイン的に問題なければそれでいいのですが、個人的には LINE や Messenger のように吹き出しの上部に表示したかったのでカスタマイズすることにしました。

「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

吹き出しのレイアウトを変更する場合は renderBubble を設定します。
まず、<GiftedChat /> コンポーネントに renderBubble={this.renderBubble} を追加します。
下記のコードでは 11行目に記述しています。

<GiftedChat
  messages={this.state.messages}
  onSend={this.sendMessage}
  user={this.state.sender}
  locale='ja'
  placeholder='メッセージを入力'
  renderAvatarOnTop={true}
  keyboardShouldPersistTaps='never'
  timeFormat='H:mm'
  alignTop={true}
  renderBubble={this.renderBubble} />

this.renderBubble の内容は下記のとおりです。

this.renderBubble = props => (
  <View>
    { props.currentMessage.user._id !== this.state.memberId &&
      props.currentMessage.user.name &&
      ( props.previousMessage?.user?._id !== props.currentMessage?.user?._id ||
        moment(props.previousMessage?.createdAt).format('YYYY-MM-DD') !== moment(props.currentMessage?.createdAt).format('YYYY-MM-DD')) &&
      <Text style={styles.name}>{props.currentMessage.user.name}さん</Text> }
    <Bubble {...props} />
  </View>
);

吹き出しの上部に送信者名を表示する際、単純にユーザ名を表示するだけだと、全ての吹き出し上部に名前が表示されてしまうので、上記のように条件を追加しています。
追加した条件は 下記の3つです。

1. 自分の名前は表示しない
2. 送信者名が存在している
3. 現在のメッセージと1つ前のメッセージの送信者が異なり、かつ現在のメッセージの送信日と1つ前のメッセージの送信日が異なる

自分の会員IDについては、ページを読み込んたタイミングで取得し、this.state.memberId で保持するようにしています。
上記を追加すると、LINE や Messenger のようなレイアウトになりました。
名前表示の条件は、お好みで調整してください。

なお上記を追加した場合、下記のインポート文を追加するのをお忘れなく。

import { Bubble } from 'react-native-gifted-chat';
import moment from 'moment';

こちらを追加しないとエラーになるので、必ず追加してください。

以上、「react-native-gifted-chat」ライブラリでメッセージ吹き出し上部に送信者の名前を表示する方法についてでした。
ご参考になれば幸いです。