react-native-gifted-chat: Updating messages properties will not trigger message bubble re-render

Issue Description

Updating messages attributes will not trigger message bubble re-render. To be more precise, updating a seen (boolean) property (similar to seen or received), will not trigger the message to be re-rendered. Messages are re-rendered only when a new message is added to the messages array, not when one particular message is updated.

Steps to Reproduce / Code Snippets

Populate a chat with x messages
Update a boolean property on any of the messages currently in chat

// https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/MessageContainer.js#L67
componentWillReceiveProps(nextProps) {
    if (this.props.messages === nextProps.messages) {
      return;
    }
    const messagesData = this.prepareMessages(nextProps.messages);
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(messagesData.blob, messagesData.keys)
    });
  }

Expected Results

Messages, or single message, should be updated and re-rendered whenever any of its properties are updated.

Additional Information

React Native version:0.49.5
react-native-gifted-chat version: 0.3.0
Platform(s) (iOS, Android, or both?): both

Possible solution

Removing the empty return within componentWillReceiveProps of MessageContainer.js, which fails to properly compare if messages are truly the same or not.

// https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/MessageContainer.js#L67
componentWillReceiveProps(nextProps) {
    //if (this.props.messages === nextProps.messages) {
      //return;
    //}
    const messagesData = this.prepareMessages(nextProps.messages);
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(messagesData.blob, messagesData.keys)
    });
  }

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 35 (1 by maintainers)

Most upvoted comments

<GiftedChat
          ref={giftedChat => {
            this.giftedChat = giftedChat;
          }}
          messages={
            this.state.toggleOffers
              ? this.props.messages.filter(message => message.messageType === 'offer')
              : this.props.messages
          }
          onSend={this.onSend.bind(this)}
          user={{
            _id: this.props.myself.id,
            match: this.props.match
          }}
          renderMessage={this.renderMessage.bind(this)}
          renderMessageImage={this.renderMessageImage.bind(this)}
          renderFooter={this.renderFooter.bind(this)}
          isAnimated
          loadEarlier={!!this.props.paginationMeta.next}
          onLoadEarlier={this.onLoadEarlier.bind(this)}
          isLoadingEarlier={false}
          bottomOffset={Platform.OS === 'ios' ? 49 : 0}
          renderTime={() => {}}
          placeholder={I18n.t('chat.typeAMessage')}
          renderInputToolbar={
            this.props.match && this.props.match.chat_user && this.props.match.chat_user.disabled
              ? this.disabledChatFooter.bind(this)
              : null
          }
          placeholderTextColor={theme.colors.input.placeholder}
          textInputStyle={{ color: theme.colors.input.text }}
          textStyle={styles.sendButton}
          onInputTextChanged={this.onTextChanged.bind(this)}
          text={this.props.currentMessage}
          label={I18n.t('chat.sendMessage')}
        />

webraptor on Dec 6, 2017

I’ve been trying to implement message reactions similar to Facebook messenger, but on Android only the most recent message and the first message update properly when their props update. Like if I tap on a message to bring up the reaction bar, the reaction bar (which I implement as an absolute positioned view on top of my custom message bubble) will only render if its the top or most recent message.

charles-goode on Mar 8, 2020

It’s often easier to merge several smaller updates rather than creating a branch for a large set of changes. imo PRs should each be as minimal as possible to achieve a finite goal.

Maybe we can get it all on master and then publish one major version bump, but even if we release several smaller changesets it should be perfectly fine.

cooperka on Dec 19, 2017

Yes I know. However, with that piece of code in place, messages aren’t re-rendered unless the entire component is re-rendered, and that’s a nasty bug as well.

webraptor on Dec 19, 2017