Dynamically updating message style only works on oldest and most recent message

[nsdub]

Issue Description

I'm trying to dynamically update the style of a message. Here's the sequence of actions...

• A user long-presses on a message
• Message ID is added to an array in state
• In renderMessage I check to see if props.currentMessage._id is in the array added to state
• If it is, change the backgroundColor of the message

This works as expected for the first and last (oldest and newest) messages in the chat. It does not work for any messages in between. I'm stumped as to why. Directionally I referred to this issue.

Any guidance would be very appreciated!

Steps to Reproduce / Code Snippets

Here's my renderMessages function...

  renderMessage = (props) => {
    const messageId = props.currentMessage._id
    let highlight = false

    // If the message has been selected by the user
    if (_.includes(this.state.selectedMessages, messageId)) {
      highlight = true
    }

    return (
      <Message
        {...props}
        containerStyle={{
          right: {
            backgroundColor: highlight ? 'green' : null,
          },
          left: {
            backgroundColor: highlight ? 'green' : null,
          },
        }}
      />
    )
  }

#### Expected Results

Any message should be able to be dynamically updated.

#### Additional Information

* Nodejs version: 15.4.0
* React version: 16.13.1
* React Native version: 0.63
* react-native-gifted-chat version: 0.16.3
* Platform(s) (iOS, Android, or both?): both
* TypeScript version: N/A

[nsdub]

I was able to achieve the desired behavior with the help of this issue. Adding the following prop solved my problem:

shouldUpdateMessage={ (props, nextProps) => this.state.selectedMessages }

[adar2378]

shouldUpdateMessage={ (props, nextProps) => //the variable which state is changing } This helped me to solve my bubble rendering problem too, thanks @nsdub!

[asevims]

I had the same issue and shouldUpdateMessage didn't help. My solution was to create a deep copy while setting messages state:

setMessages((oldMessages) =>
GiftedChat.append(oldMessages, JSON.parse(JSON.stringify(updatedMessages)))
);;