React-native-gifted-chat: How to load messages on scroll?

[booboothefool]

I tried out the "Load earlier messages" button and it works great, but I am wondering how you would check for when the user scrolls to the top so it can be ran without pressing the button.

Also, is there a way to get the number of messages that GiftedChat currently has without relying on my own state changes e.g. GiftedChat.messages.length? Would also be useful for pagination.

[FaridSafi]

Hello,

Regarding "Loading earlier messages" on scroll, this is not supported. Feel free to submit a PR

You can get the number of messages like this :

render() {
  return (
    <GiftedChat
      // ...
      ref={(c) => this._giftedChatRef = c}
    />
  );
}
yourFunction() {
  console.log(this._giftedChatRef.getMessages().length);
}

[drpiou]

Hi, this plugin should implement a loadEarlierMessagesOnScroll, that seems to me a classical function in any chat for loading messages when scrolling top... (can you imagine whatsapp, fb messenger or any other chat only with a click-to-load-earlier-messages button ?)

However, if someone wonders how I achieved it:

isCloseToTop({ layoutMeasurement, contentOffset, contentSize })
{
    const paddingToTop = 80;
    return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
}

render()
{
    return (
        <GiftedChat
            listViewProps={{
                scrollEventThrottle: 400,
                onScroll: ({ nativeEvent }) => { if (this.isCloseToTop(nativeEvent)) this.loadMoreMessage(); }
            }}
        />
    );
}

[hotchemi]

Any update? 👀

[sriram-cg-xelp]

Any new feature in latest release for this ?

[AleksandarSavic95]

@drpiou's solution didn't work for me, so I made some modifications, and here they are:
How to check if scroll is close to top:

const LOAD_EARLIER_ON_SCROLL_HEGHT_OFFSET = 100;
// ...
isCloseToTop({ layoutMeasurement, contentOffset, contentSize }) {
  const contentTopOffset = contentSize.height - layoutMeasurement.height - contentOffset.y;
  // if the screen is not full of messages, offset would be too big
  return contentSize.height < layoutMeasurement.height
    ? contentOffset.y > LOAD_EARLIER_ON_SCROLL_HEGHT_OFFSET // so we only check bottom offset
    : contentTopOffset + LOAD_EARLIER_ON_SCROLL_HEGHT_OFFSET < 0;
}

• contentTopOffset = how far is the oldest chat message from the top edge: positive number means above, negative number means below.
• contentOffset.y = the number showing how much content is below the bottom edge of the visible chat area.

[msqar]

@AleksandarSavic95 ughh there's a catch, your idea works awesome, but I'm using scrollToBottom feature too... and by passing it as listViewProps, is overriding the onScroll for gifted-chat and hence, the scrollToBottom logic where it hides/shows depending on the scroll offset. The only way I can make this work now is by downloading the entire code and changing it to my liking, didn't want to do this but, jeeez T_T

[gds3k3]

@AleksandarSavic95 ughh there's a catch, your idea works awesome, but I'm using scrollToBottom feature too... and by passing it as listViewProps, is overriding the onScroll for gifted-chat and hence, the scrollToBottom logic where it hides/shows depending on the scroll offset. The only way I can make this work now is by downloading the entire code and changing it to my liking, didn't want to do this but, jeeez T_T

A flag inside the new onScroll event can show/hide a custom scrollToBottom component.