React-native-gifted-chat: Initialization is slow

[amitava82]

Issue Description

Why there is a delay in initializing the component? Even when the messages are available in state/redux, it take a second to render the messages (renders spinner). I'd expect to show without any delay much like whatsapp. Everytime user switch conversation there is a bit delay to render already loaded messages which isn't very good experience. Am I doing something wrong or that's how it is?

Edit: Sometimes it renders without any delay.

Additional Information

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

[brunocascio]

I think that could be resolved when we will use FlatList instead of ListVIew, but I am not completely sure.

[juanmanuelarze]

In MessageContainer.js on line ~ 26 you have this.

const dataSource = new ListView.DataSource ({
rowHasChanged: (r1, r2) => {
returns r1.hash! == r2.hash;
}
});

GiftedChat generates md5 hashes for each message and uses it to compare messages in the list, this is by default, but at least I, my messages have their own identifiers, database identifiers, compare numbers is faster.
In the prepareMessages method you have the comment
// add the following and previous messages to the hash to ensure updates

if you change the value to compare from hash to id (int) you lose the updates and the avatars will be repeated in each message, just do

toHash = previousMessage.my_id_int + nextMessage.my_id_int

[amitava82]

I'm afraid I don't follow what you are proposing.

[juanmanuelarze]

im talking about fork GiftedChat and modify.

[amitava82]

Yeah I see what you're saying. Let me try that.

[amitava82]

Yeah that definitely improved performance. Since all messages have _id I don't quite understand it's being md5ed again for uniqueness.

[brunocascio]

Hi @juanmanuelarze @amitava82 !

I saw the line that you are mentioning (https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/MessageContainer.js#L49)

I think it is needed because a message could be updated (editing message text for example).

[juanmanuelarze]

yes, I solve the problems with the state updates modifying
componentWillReceiveProps in MessageContainer.js

and this:

    const dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => {
        return (r1._id !== r2._id) || (r1.state !== r2.state);
      }
    });

in MessageContainer.js too

state is (sended|recived|viewed)

@brunocascio
if you need to update a message if the text changes, modify componentWillReceiveProps for updates to make it update when you change the text of a message
and you need do something like this

    const dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => {
        return (r1.hash !== r2.hash) || (r1.text !== r2.text);
      }
    });

[ahmadsyamim]

Hi. When i click Send, there will be delay before message added. Can someone help?

[nuonical]

Hi @juanmanuelarze @amitava82 @brunocascio ,

I've modified the componentWillReceiveProps function to no longer use md5 hashing, but it's still taking a couple of seconds just to load 5 hardcoded messages. Anyone have any further luck getting this to load messages in a reasonable timeframe?

[alexandregiordanelli]

is there a solution?

[muhammadwfa]

I faced with this issue too, although now rngc are using flatlist but still when opening the messages it takes too much time to load it from state.