Scroll to bottom (showing newest message) when calling prepend or concat earlier messages

[cicomint]

Issue Description

When im updating list with prepend or concate method, the view is scrolling to bottom.

Steps to Reproduce / Code Snippets

Chat View

<GiftedChat
              messages={this.state.listMessage}
              onSend={messages => this.onSend(messages)}
              renderFooter={this.renderFooter}
              scrollToBottom
              inverted={true}
              user={{
                _id: authUser._id,
                name: authUser.name
              }}
              listViewProps={{
                onEndReached: debounce(canLoadMore ? () => this.loadMoreContent(chatroomActive) : () => {}, 250),
                onEndReachedThreshold: 0.1,
            }}

loadMoreContent function

loadMoreContent = async (item) => {
    const { page } = this.state;
    const query = {
      populate: 'file sender.profile.photo',
      q: `channel=${item._id}`,
      limit: 20,
      page,
    };
    const { data } = await fetchApi.get('/collaboration/chat', query);
    if (data && data.status === 'success') {
      const messages = await data.data.collaborationlog.map(x => ({
        _id: x._id,
        text: x.message,
        createdAt: x.createdAt,
        user: {
          _id: x.sender._id,
          avatar: item.avatar
        },
        system:x.type=='call',
      }));
      if (page > 1) {
        this.setState(prevState => ({
          listMessage: prevState.listMessage.concat(messages),
        }));
      } else {
        this.setState({ listMessage: messages });
      }
      this.setState({
        page: page + 1,
      });
      const { totalPage } = data.data;
      if (totalPage > page) {
        this.setState({ canLoadMore: true });
      } else {
        this.setState({ canLoadMore: false });
      }
    } else {
      this.setState({ loading: false });
      Alert.alert(
        'Error',
        'Error fetching data',
        [
          { text: 'Ok' },
        ],
      );
    }
  }

if i replacing this line

this.setState(prevState => ({
          listMessage: prevState.listMessage.concat(messages),
        }));

with

this.setState(prevState => ({
          listMessage: GiftedChat.prepend(prevState.listMessage, messages)
        }));

i still get same result.

Expected Results

When scroll reach top of list, its fetching data update listMessage and stay in current scroll position

Additional Information

• Nodejs version: v10.16.3
• React version: 16.9
• React Native version: 0.61.1
• react-native-gifted-chat version: 0.9.11
• Platform(s) (iOS, Android, or both?): Android
• TypeScript version: -

[cicomint]

work perfect on ASUS_X00PD
but ASUS_X00ID still facing this issue

[raienko]

same issue - ios/android simulators

[deberoppa7]

@cicomint , I was struggling with the same issue. the fix is to do this :
listViewProps={{ ref : null }}
And I don't have any explanation why it works !

[msqar]

@deberoppa7 by doing that, you break the scrollToBottom functionality. So not recommended.

[antoinefotso]

any solution about this issue?

[msqar]

@antoinefotso I had to remove some lines within GiftedChat.js, ended up downloading all the files and changing it to my needs... because i wanted to have both functionalities... the scrollToBottom, the append and also the scroll up to load more messages automatically... added all. I suggest you to do the same, otherwise you won't have all 3.

[jingfreeks]

try this one instead of concat Array.prototype.push.apply

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Infoto]

I have the same problem. Does anyone have any other suggestions. push.apply doesn't help.

[antoinefotso]

@Infoto get a look here #1603

[KaloyanYosifov]

Here is a hack untill this gets updated -- #1603

[phasjim]

I used @deberoppa7 solution and disabled the scrollToBottom functionality. Thank you!