React-native-gifted-chat: force re-render if existing message text changes

[zkrige]

Issue Description

not re-rendering if existing message changes

Steps to Reproduce / Code Snippets

change message content of existing message via this.setState({messages : messages});
My host component is redrawn with new state, and new messages are passed to gifted chat, but chat on screen doesnt change

Expected Results

existing messages in chat should re-render with changed text

Additional Information

• React Native version: 0.38.0
• react-native-gifted-chat version: 0.0.10
• Platform(s) (iOS, Android, or both?): both

[zkrige]

I was mutating the original object in my reducer which meant that the nextprops was always == this.props, so change never happened

[Sense]

Hi, we're facing the same problem as you describe (we'd like to change text message with the translated text, but the screen doesn't update even after pushing it into the state.) Please can you provide a potential solution to this @zkrige ? Thanks!

[zkrige]

i'm using redux. In my case the list of messages wasnt a new list, only a changed list. this means that RN didnt pick up the props change, so never forced the refresh.

this wont always work. Object.assign only seems to clone 1 level deep. The lower children are references to the original object

let chat = Object.assign({}, chats[chatId]);
let messages = chat.messages;
messages.append(message);
chat.messages = messages;
chats[chatId] = chat;
return chats;

instead you should do something like

let chat = JSON.parse(JSON.stringify(chats[chatId]));//do this instead of object.assign, because object assign only does shallow copy
let messages = chat.messages;
messages.append(message);
chat.messages = messages;
chats[chatId] = chat;
return chats;

[Sense]

I just found a solution too, instead of putting messages: new_messages into the setState with my edited message, I do something like this:

this.state.messages.filter(m =>
    {
        if(m._id == message._id){
            m.translated = 1;
            m.text = message.original_message
        }
        return m._id == message._id;
    })
    this.setState((previousState) => {
        return {
            messages: GiftedChat.append([], this.state.messages)
        };
    });

I know that's not the best solution because it has to redraw all messages in the conversation, but seems like to be the best solution according to my needs right now.

[zkrige]

Its probably something similar - giftedchat.append returns a new object, so
the message list refreshes

On Mon, Jul 31, 2017 at 4:25 PM, full-stack dev ⚔ [e-mail]
wrote:

I just found a solution too, instead of putting messages: new_messages
into the setState with my edited message, I do something like this:

this.state.messages.filter(m =>
{
if(m._id == message._id){
m.translated = 1;
m.text = message.original_message
}
return m._id == message._id;
})
this.setState((previousState) => {
return {
messages: GiftedChat.append([], this.state.messages)
};
});```

I know that's not the best solution because it has to redraw all messages in the conversation, but seems like to best solution according to my needs right now.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/FaridSafi/react-native-gifted-chat/issues/400#issuecomment-319082655,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA7G3LMv2wassGbk0wjh-fmQNbIA22cbks5sTePagaJpZM4MfQ_M
.

--
Zayin Krige
twitter : zayinkrige
http://www.apextechnology.co.za

[ibaigil]

i'm using redux. In my case the list of messages wasnt a new list, only a changed list. this means that RN didnt pick up the props change, so never forced the refresh.

this wont always work. Object.assign only seems to clone 1 level deep. The lower children are references to the original object

let chat = Object.assign({}, chats[chatId]);
let messages = chat.messages;
messages.append(message);
chat.messages = messages;
chats[chatId] = chat;
return chats;

instead you should do something like

let chat = JSON.parse(JSON.stringify(chats[chatId]));//do this instead of object.assign, because object assign only does shallow copy
let messages = chat.messages;
messages.append(message);
chat.messages = messages;
chats[chatId] = chat;
return chats;

Thank you for this information, it works!