React-native-gifted-chat: Show user name on top of the first message from the user

Created on 6 Dec 2016  路  2Comments  路  Source: FaridSafi/react-native-gifted-chat

Hi, is there a way to show user name of the sender of a message on top of the first message from this user.

Something like that:

screenshot_2016-12-06 13 52 06_drcwjw

Most helpful comment

I manage to do it. Add renderBubble attribute to GiftedChat:

  render() {
    return (
        <GiftedChat
          messages={messagesList}
          onSend={this.onSend}
          renderBubble={this.renderBubble}
        />
    );
  }

Edit a renderBubble function and use utils function like isSameUser and isSameDay

  renderBubble(props) {
    if (props.isSameUser(props.currentMessage, props.previousMessage) && props.isSameDay(props.currentMessage, props.previousMessage)) {
      return (
        <Bubble
          {...props}
        />
      );
    }
    return (
      <View>
        <Text style={styles.name}>{props.currentMessage.user.name}</Text>
        <Bubble
          {...props}
        />
      </View>
    );
  }

the result give something like that:

screenshot_2016-12-14 16 34 32_zgx5nd

All 2 comments

I manage to do it. Add renderBubble attribute to GiftedChat:

  render() {
    return (
        <GiftedChat
          messages={messagesList}
          onSend={this.onSend}
          renderBubble={this.renderBubble}
        />
    );
  }

Edit a renderBubble function and use utils function like isSameUser and isSameDay

  renderBubble(props) {
    if (props.isSameUser(props.currentMessage, props.previousMessage) && props.isSameDay(props.currentMessage, props.previousMessage)) {
      return (
        <Bubble
          {...props}
        />
      );
    }
    return (
      <View>
        <Text style={styles.name}>{props.currentMessage.user.name}</Text>
        <Bubble
          {...props}
        />
      </View>
    );
  }

the result give something like that:

screenshot_2016-12-14 16 34 32_zgx5nd

excuse me, I want to ask, how do you do the validation, here my case is
there is a user and admin, how do I handle it?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tafelito picture tafelito  路  3Comments

cassioseffrin picture cassioseffrin  路  3Comments

xcxooxl picture xcxooxl  路  3Comments

luisar picture luisar  路  3Comments

inceptivetech picture inceptivetech  路  3Comments