How do you render item time under bubble chat react native gifted chat?

Question

I use React Native Gifted Chat To create a UI chat and I want to render the chat time and symbol under the bubble chat.

I want make like this image :

I have tried to use the rendering message but no luck, please help.

Answer 1

I was just working on this my self. What you need to do is to have custom renderBubble in which you wrap the with your own components. It would look something like this. The first part of the code is just the alignment of timestamp to the left or right, depending if the message was written by the current user or not.

renderBubble(props) {
    var sameUserInPrevMessage = false;
    if (props.previousMessage.user !== undefined && props.previousMessage.user) {
      props.previousMessage.user._id === props.currentMessage.user._id ? sameUserInPrevMessage = true : sameUserInPrevMessage = false;
    }

    var messageBelongsToCurrentUser = currentUserId == props.currentMessage.user._id;
    return (
      <View>
        {!sameUserInPrevMessage && <View
          style={messageBelongsToCurrentUser ? styles.messageTimeAndNameContainerRight : styles.messageTimeAndNameContainerLeft}
        >
          
        <Bubble
          {...props}
        />
          <Text style={styles.messageTime}>{moment(props.currentMessage.createdAt).format("LT")}</Text>
          <Text style={styles.messageUsername}>{props.currentMessage.user.name}</Text>
        </View>}
      </View>
    )
  }

also put this in the GiftedChat component renderMessage={this.renderBubble}