How to make the React Native Gifted Chat icon change if the chat isn't sent to server?

Question

I use react native gifted chat, and I want that when a user fails to send a chat to the server then the icon in the bubble changes?

Maybe if a user fails to send a message, an icon like this will appear:

Thank you, please help

Answer 1

I know it was a long time ago, but maybe it can help someone. If you are using Hooks and your messages array is defined like this const [messages, setMessages] = useState();

So, when tap on Send, you can add a new message to your state. Important to add pending and sent properties like

yourMessage.pending = true;
yourMessage.sent = false;

So, when you have the backend response, you can update

yourMessage.pending = false;
yourMessage.sent = true;

Finally, update the message state

setMessages(previousMessages => {
    const index = previousMessages.findIndex(aMessage => aMessage._id == yourMessage._id);
    const newArr = [...previousMessages];
    newArr[foundIndex] = yourMessage;
    return newArr;
});