React-native-gifted-chat: Cannot update particular message

[kesha-antonov]

Hello!

This won't work if we update existing message
https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/MessageContainer.js#L65

I do not know why it so because when we add new message nextProps is containing new msg while this.props do not.
But on update some existing message these two variables are the same. (I mean all keys and values. I've checked :) )

My solution is to remove this line
https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/MessageContainer.js#L65
Do have any thoughts?

[kesha-antonov]

https://github.com/kesha-antonov/react-native-gifted-chat/commit/584f7422590a349be4345614a6a7c092ec54bbc1

[FaridSafi]

If we remove this condition we will experiment latency when increasing height of InputToolbar.
Another solution is that you create a new messages array when you update one message.

Something like:

        const messages = this.state.messages.slice(0);
        messages[0].text = 'updated message';
        this.setState({messages});

[kfiroo]

@kesha-antonov @FaridSafi This is based on the react-native guideline that all data (and the app state in perticular) should be immutable.
If your messages list is changed in any way, even if a message in that list has changed, entire list is replaced.
Inner messages which did not change would not get rendered again, because they will have the same ref.

Does that make sense?

[kesha-antonov]

Hello guys!

Thanks. It helped. 😄

I did expect that

this.state.messages[0].text = 'updated message';
this.setState({messages: this.state.messages});

will do the same (like in any peace of code with React where I did update state like this). But it didn't happen

Do you know why it won't work with GiftedChat?

[FaridSafi]

because this.state.messages has still the same reference

[kesha-antonov]

Ok, thanks! @FaridSafi

[kfiroo]

@kesha-antonov try something like this

const index = 0; // the index you need to change
// create a new array
const newMessagesArray = this.state.messages.map((msg, i) => {
    if (i === index) {
        return {
            ...msg,
            text: 'some new text'
        };
    }
    return msg; // same message ref
});
// set the new state
this.setState({
    messages: newMessagesArray
});

[kesha-antonov]

Even better :) Thanks! @kfiroo

[cloudtenlabs]

@kfiroo This is working for only index = 0

[cloudtenlabs]

@FaridSafi How can I solve this problem?