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.

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.

• javascript
• react-native
• chat
• react-native-gifted-chat

Share Follow asked Feb 6, 2020 at 9:42 zidniryizidniryi 1,35133 gold badges1616 silver badges3737 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 ponents. 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 ponent renderMessage={this.renderBubble}