React-native-gifted-chat: Message SENT/RECEIVED tick mark not rendering

Created on 21 Mar 2018 · 7Comments · Source: FaridSafi/react-native-gifted-chat

Issue Description

Component don't update after changing messages.sent/received = true;

Steps to Reproduce / Code Snippets

this.state.messages[this.state.messages.indexOf(message_id) + 1].sent = true;
this.setState({ messages: this.state.messages });

Expected Results

Component should re render with a tick mark

Additional Information

Nodejs version: v9.3.0
React version: 16.3.0-alpha.2
React Native version: 0.54.2
react-native-gifted-chat version: 0.4.3
Platform(s) (iOS, Android, or both?): BOTH

question waiting-response wontfix

Source

Suraj-Tiwari

Most helpful comment

You should use immutable functions in order to keep it working.

this.setState({ messages: this.state.messages.map(m => {
  if (m.id === message.id) {
    return {
      ...m,
      sent: true
    }
  }
  return m;
})

brunocascio on 22 Mar 2018

👍4

All 7 comments

This will not work. State Object is always changing with thesetState() Method and not by the assign operator.

mafiusu on 21 Mar 2018

Well i did tried this too

let temp_data = this.state.messages
temp_data[temp_data.indexOf(message_id) + 1].sent = true;
this.setState({ messages: temp_data })

This isn't working too..

Suraj-Tiwari on 21 Mar 2018

You should use immutable functions in order to keep it working.

this.setState({ messages: this.state.messages.map(m => {
  if (m.id === message.id) {
    return {
      ...m,
      sent: true
    }
  }
  return m;
})

brunocascio on 22 Mar 2018

👍4

808

TODO: Add mark message as read. Will work on it next weekend.

Suraj-Tiwari on 23 Mar 2018

Help wanted #808 @brunocascio

Suraj-Tiwari on 23 Mar 2018

I just found an easy fix. Fork this repo, and in GiftedChat.js, instead of using this._messages and this.getMessages() to update messages to MessageContainer, you set a state (like this.state_messages) and call setState in componentDidMount(and comment out this.setMessages())

the bug of tick not rerendering on receive is due to this._messages and this.getMessages() do not rerender the GiftedChat component, but setState does the job.

leonyhenn on 27 Dec 2018

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.