Render single bubble

[pergunt]

I need to show an error of the current message if sending was false cause server error. When I trying to do that all bubbles taking red color instead of las sended message. How to implement style for last sended message (bubble/MessageText) ?

[xcarpentier]

Please see #640

[pergunt]

I saw that and i tried to import buble to single component and render in the root (Chat) component But when i take the server error end give red color for the right bubble - ALL sended bubbles makes red text color. I need only one which not was sent.

[xcarpentier]

You have to deal with props.currentMessage and add condition to apply your style or not. Le ven. 2 févr. 2018 à 10:10, ivanFullStackSenior <[email protected]> a écrit :

…

I saw that and i tried to import buble to sindle component and render in the root component/ But when i take the server error end give red color for the right bubble - ALL sended bubbles makes red text color. I need only one which not was sent. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#739 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA4VnBri3sJn73FXoGUsAWjfY40w3WBRks5tQtD9gaJpZM4R1pzd> .

[pergunt]

I am not understood that clearly cause i saw keys in currentMessage obj and there is no style or 'color' key. Only text, id, createdAt, {user: _id}. No color

[xcarpentier]

Do you have position? left or right?

[pergunt]

In 'currentMessage' obj - no. Only those keys which I described allow.

[mafiusu]

In the message object you could provide a custom parameter called sent/received. If currentMessage obj has the key sent with false you will render your Bubble accordingly. As @xcarpentier describes you have to add condition to apply your style or not.

[pergunt]

In the message object or in the currentMessage obj? See my code please. Where it was wrong?

[mafiusu]

I will give you an example.

1. Provide renderBubble prop for the GiftedChat component
   <GiftedChat renderBubble={this.renderBubble} />
2. Implement renderBubble
   After you import Bubble from the GiftedChat you can return your Bubble component based on the currentMessage like this:

  renderBubble(props) {
    if(!props.currentMessage.sent){
    // if current Message has not been sent, return other Bubble with backgroundColor red for example
      return (
        <Bubble
        wrapperStyle={{
          right: { backgroundColor: 'red' },
        }}
        {...props}
      />
      );
    }
    return (
      // Return your normal Bubble component if message has been sent.
      <Bubble {...props}  />
    );
  }

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.