React-native-gifted-chat: Sent picture message is shown only after I send a second message

[mafiusu]

Issue Description

I am using sockets to send images to the server and then to the other client. But if the other client received an image the view for the MessageImage is not showing the image. It's showing after a second message is received like you see in the screenshots.

Steps to Reproduce / Code Snippets

The client (sender) sends this code:
this.props.onSend({image: image.uri, base64: base64string});
An image.uri to display the image for himself and a base64 string that can convert the other client.

The other client (receiver) has the following code
It takes a base64 String from the server and saves the image using the saveToCameraRoll function and then retrieves the new image uri to display it to the client. I changed the message.image to the new uri.

            if(Platform.OS === 'ios'){
                CameraRoll.saveToCameraRoll(messages.message.base64, 'photo').then((data)=>{
                    messages.message.image = data;
                });
            }
            this.setState({typingText: null});
            this._storeMessages(messages.message);

See screenshots below
I also got a performance drop. My Sending button takes 2-3 seconds to send a short message after I sent a picture.

Expected Results

Displaying send images directly in the chat and not after a second message has been send.

Additional Information

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

[vgorte]

Hello @mafiusu ,
how do you update your messages[] when you want to send an image to a client?
Do you use setState() ?

[mafiusu]

@vgorte the messages[] are updated like all other kind of messages (Position, Text, ..) using this helper method:

    _storeMessages(messages){
        this.setState((previousState) => {
            return {
                messages: GiftedChat.append(previousState.messages, messages)
            };
        });
    }

[mafiusu]

I just wanted to inform that this problem has been solved. Read below how:

The problem occurs because the receiver client takes a base64 string. With that base64 string I convert it to an image and get as a response a local path uri. This is time consuming! Since I figured it out I changed the behavior of the NodeJS Server (Socket.IO).

The server takes the base64 string and save the images in the server and the clients receives a server url from the image. Since the Message Object accepts an url for the image key I can pass the server url of the Image. And this is much faster while chatting with images.

It will be even faster if I compress the images at server side.

[denny64]

@mafiusu can you share your solution?