How to load messages on scroll?

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.

[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(); }
            }}
        />
    );
}

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