React-native-gifted-chat: inverted={false} messes up the chat, day order.

[brzonsea]

I need my chats to start from the top when first rendered, so I would like to use the newly added inverted prop.

So I used it as
inverted = {false}
and it seems my chats are seen from the top to bottom without inversion.

But, the day indicator text for the chat messages is jumbled up somehow.
I think the changes needed for correct ordering wasn't accounted for when inverted prop is set to false.

The behavior looks like the above picture.

Day "Mar 9, 2018" is supposed to be placed on top of the Obama picture.
Day "Mar 11, 2018" is however in the correct position.

It seems that if there are multiple chat messages for the same day, the day indicator text is rendered
just above the last chat message of that given day.
This obviously is a legacy from before when the inverted prop was not supported, can anyone fix this?

• react-native-gifted-chat version: 0.4.1

[mafiusu]

Could you try some reverse method on the messages state object?

[brzonsea]

My intention is to order the earliest messages at the top to latest at the bottom. So reversing the messages prop object wouldn't be helpful.

[mafiusu]

I will welcome any PR that provides a correct way of displaying the chat messages from the top rather from the bottom. Not every chat application starts the messages from the bottom.

@xcarpentier @FaridSafi @cooperka @kfiroo @brunocascio ... maybe after the FlatList is ready.

[apparition47]

Hey @brzonsea, I think I was the one that originally worked on this prop.

Help me understand your setup a bit more. Are you saying the 7:01 PM, 7:13 PM, 7:14 PM and 7:33 PM messages are supposed to be grouped under Mar 9, 2018? Could you provide that code sample here? More specifically, I'd like to see your GiftedChat messages prop array.

Thanks!

[brzonsea]

Hi @apparition47 , I can't really provide you with the messages prop array at this moment. But I can explain more thoroughly of what I have observed.
First, I am using the inverted prop set to false, which is because I want to show my chat messages starting from the earliest at the top to latest on the bottom.
So, I haven't reversed the messages array at all, it is in chronological order.

In the screenshot above,7:01 PM, 7:13 PM, 7:14 PM, 7:33 PM are all supposed to be grouped under Mar 9, 2018.
The case below, for the 5:46 PM, the date is in the right position, because there was only one chat entry on that date.
Chats appearing below (those that I couldn't include in the screenshot) 5:46 PM are from the next day. There were multiple chat entries at that date, and again the date was rendered just above the last chat message of that day.
From what I have observed, when using the inverted prop set to false, the date is rendered right above the last message of that given date. I think this made sense for inverted={true} case, but this behavior has to be changed for those setting inverted={false}

[apparition47]

@brzonsea , I think I got it fixed. The date headers should appear in the correct location inverted true or false. Could I ask you to test it out and let me know if this fixes your issue?

$ npm i https://github.com/Clintal/react-native-gifted-chat#invertdayfix

My test

render() {
  // const history = [{_id: 0, text: 'こんにちは。今日はどうされましたか？', "createdAt":"2018-03-20T01:28:24.701Z", ...}
  return (
    <GiftedChat inverted={false} messages={history} />
  )
}

Before fix:

After fix:

[brzonsea]

@apparition47 Wow, thanks for the help! I tested it and it seems to be working as desired!
Is there any way this fix gets merged into the next release?

[apparition47]

@brzonsea Great! I put in a PR. It's a small fix so there shouldn't be any objections.