Automatic scrolling not working (scrollToBottom, onSend)

Issue Description

Follow-up on #975 (closed by stale bot)

Automatic scrolling to bottom does not seem to work at all in my setup. I use inverted=true (the default). I use GiftedChat inside a Navigation with a Tabbar.

1. when I manually scroll up a bit, and then by myself send a message, the flat listview should scroll automatically down the the new message that was just added (see onSend(), GiftedChat.js:113), but it does nothing.

2. when I activate scrollToBottom=true, the scroll-to-bottom button is shown, but nothing happens when I tap on it. I would expect the message list to scroll to the bottom (see MessageContainer.js:94)

Expected Results

Automatic scrolling works in both cases.

Additional Information

• React Native version: 0.59.0
• react-native-gifted-chat version: 0.9.0
• Platform(s) (iOS, Android, or both?): iPhone X Simulator (iOS 12.2), Android Simulator (SDK 28)

[hubermat]

This is not a problem of list ordering. If I manually scroll to the middle of the chat and then press the scrollToBottom button oder enter a message, it should scroll in any direction, but it does nothing.

As I wrote, I use GiftedChat inside a Navigation with a Tabbar. Now I did a change to hide the tabbar and et voila - GiftedChat scrolls! I don’t know why this is the case, but for my usecase (with the hidden tabbar) it is working now.

I will leave this issue open though, so that the original issue maybe can be fixed.

[noelsp]

Hi @hubermat, I found my error. In my project, I am using redux, and my message list was not reversed. In the example of GiftedChat you will see that it uses a static method called append and uses it to invert the list of messages.

onSend(messages = []) {
  this.setState(previousState => ({
    messages: GiftedChat.append(previousState.messages, messages),
  }))
}

This is necessary because the entire flat list is inverted to position the scroll at the end of the list by default (This is my deduction).

Then, I solved this by removing the inverted={false} property and making sure that in my list of redux messages the new messages are being added in reverse order. When I get my previous messages I reverse them and when I add a new message to the array I use .unshift()

I hope it serves you