Re-render a Button inside “renderMessageImage” to change its “disabled” property

Issue Description

I’m trying to re-render a Button inside renderMessageImage to make its disabled property change from false to true when onPress.

I am doing it through a boolean in this.state, however I see the state value updating on the logs but the button remains visually the same and it can be pressed again and again without actually changing its disabled property.

Steps to Reproduce / Code Snippets

Just setting up a simple class (eg. Chat.js) where I set the renderMessageImage to return a View with a Button which disabled property is obtained from a state value:

constructor(props) {
    super(props);
    this.state = {
        messages: [],
        isButtonDisabled: false
    };
}

renderMessageImage = (props) => {
      return (
      <View>
          <Button
            title="Disable Button"
            disabled={this.state.isButtonDisabled}
            onPress={() => this.disableButton(props.currentMessage.id)}
          />
      </View>)
}

render() {
    return (
      <View style={{ flex: 1 }}>
        <GiftedChat
          messages={this.state.messages}
          user={this.user}
          placeholder={"Write a message..."}
          renderMessageImage={this.renderMessageImage}
        />
      </View>
    );
}

Then I call a simple method when onPress that button to make the isButtonDisabled state value change to true:

disableButton = async (message_id) => {
      console.log("Disabling message_id: " + message_id); //This shows the msg_id correctly where the button is
      this.setState(previousState => ({
          isButtonDisabled: true
        }));
      return true;
}

Finally I am checking this.state.isButtonDisabled and it is actually changing, but the button remains enabled, it doesn’t get re-rendered and thus it can be clicked again and again.

Expected Results

I checked that the GiftedChat.js component and messages are being updated once per button click so I guess that it should be forcing a re-render, however the button created in renderMessageImage is never re-rendering/updating to properly show its new disabled value and actually become disabled.

Additional Information

• Nodejs version: 10.15.3
• React version: 16.8.3
• React Native version: 0.59.8
• react-native-gifted-chat version: 0.12.0-beta-0
• Platform(s) (iOS, Android, or both?): Android
• TypeScript version: -

[stale[bot]]

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.

[charles-goode]

I’m experiencing a very similar issue where my FB messenger-esque emoji reaction popup (part of my custom message bubble) only re-renders for the top message and the most recent message. This has been a VERY common problem for a while now, so I’d love to see it fixed. 1378 1588 are the two most recent to stale out with no action. In 1483 some claim to have gotten it to work by updating. This is definitely not working for some of us. Just searching “re-render” on this repo gives various reformulations of this same problem dating back at least TWO years: 654