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

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: -

[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 !

[raienko]

same issue - ios/android simulators