Как повторно отрендерить кнопку, чтобы изменить свойство «disabled» на «renderMessageImage» с response-native-gifted-chat?

Question

Я изучаю React Native, и это мой первый пост в переполнении стека.

Я пытаюсь перерисовать кнопку, чтобы изменить ее свойство disabled с false на true когда onPress.

Эта кнопка визуализируется вручную внутри renderMessageImage из response-native-gifted-chat.

Я делаю это через логическое значение в this.state, однако я см. обновление значения состояния в журналах, но визуально кнопка остается прежней, и ее можно нажимать снова и снова, фактически не изменяя ее свойство disabled.

Я имею в своем классе Chat.js:

constructor(props) {
    super(props);
    this.state = {
        isButtonDisabled: false
    };
}

Затем из Gifted Chat я звоню renderMessageImage, чтобы показать пользовательский дизайн сообщения, когда сообщение имеет изображение:

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

Этот пользовательский дизайн - просто кнопка, которая должна вызывать другой метод и затем отключите себя:

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

Для того, что я тестировал до сих пор, я вижу, что значение состояния isButtonDisabled правильно меняется с false на true, и, как я прочитал, изменение состояния должно привести к повторной визуализации компонента, но к сожалению, это не работает таким образом.

Более глубокое тестирование:

Затем я направился к GiftedChat.js источникам из react-native-gifted-chat, чтобы попытаться отладить некоторые из код и посмотреть, что там происходит. Я обнаружил, что всякий раз, когда я нажимаю свою пользовательскую кнопку, componentDidUpdate из GiftedChat.js вызывается дважды:

componentDidUpdate(prevProps = {}) {
    const { messages, text, inverted } = this.props;
    console.log(this.props !== prevProps); //This is called twice per button click
    if (this.props !== prevProps) {
        //this.setMessages(messages || []); //I changed this line for the line below to directly update state
        this.setState({ messages });
        console.log(this.props !== prevProps); //This is called once per button click (first of the two calls)
    }
    if (inverted === false &&
        messages &&
        prevProps.messages &&
        messages.length !== prevProps.messages.length) {
        setTimeout(() => this.scrollToBottom(false), 200);
    }
    if (text !== prevProps.text) {
        this.setTextFromProp(text);
    }
}

После того, как все это проверено, я вижу, что состояние обновляется, и GiftedChat.js компонент и сообщения обновляются один раз за нажатие кнопки, однако моя кнопка в renderMessageImage никогда не выполняет повторный рендеринг, чтобы правильно отобразить новое значение disabled и фактически отключиться.

Я совершенно не понимаю, что еще для тестирования, поэтому я был бы очень признателен за помощь в том, что я делаю неправильно.

Заранее большое спасибо.

Редактировать: renderMessageImage называется GiftedChat в моем разделе Chat.js class render(), тогда GiftedChat будет вызывать this.renderMessageImage всякий раз, когда в сообщении есть изображение (например, this.state.messages[i].image != undefined). Эта часть работает правильно, все вызывается так, как должно, только повторная визуализация состояния кнопки (disabled) не обновляется:

  render() {
    return (
      <View style={{ flex: 1 }}>
        <GiftedChat
          messages={this.state.messages}
          onSend={this.sendMessage}
          user={this.user}
          placeholder={"Write a message..."}
          renderMessageImage={this.renderMessageImage}
        />
        <KeyboardAvoidingView behavior={'padding'} keyboardVerticalOffset={80}/>
      </View>
    );
  }