3

I want to load more messages when I scroll to top. There is a prop onLoadEarlier which I passed a function here to load more message but it does not work. this function really called when open up chatbox but I want to execute a function when I scroll to top.

Iqbal Jan
  • 644
  • 3
  • 7
  • 20

3 Answers3

3

You can use scrollEventThrottle and onScroll props in listViewProps in order to invoke callback, when you hit the top of Scrollview in GiftedChat. Works fine for me.

<GiftedChat
          messages={this.state.messages}
          listViewProps={{
            scrollEventThrottle: 400,
            onScroll: ({ nativeEvent }) => {
              if (this.isCloseToTop(nativeEvent)) {
                this.setState({refreshing: true});
                this.loadMoreChat();
              }
            }
          }}
          onSend={messages => this.onSend(messages)}
          user={{
            _id: 2,
          }}
        />

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

Code reference has been taken from here.

NightFury
  • 13,436
  • 6
  • 71
  • 120
0

For those who set inverted to true.
With listViewProps with scrollEventThrottle and onScroll:

is_close_to_top({ layoutMeasurement, contentOffset, contentSize }) {
        return contentOffset.y <= 100; // 100px from top
}

[...]
<GiftedChat
    messages={this.state.messages}
    inverted={true}
    listViewProps={{
        scrollEventThrottle: 400,
        onScroll: ({ nativeEvent }) => {
            if (this.is_close_to_top(nativeEvent)) {
                this.setState({is_loading: true}); // your state
                this.load_earlier(); // your function
            }
        }
    }}
    onSend={messages => this.send(messages)}
    user={{
        _id: 1
    }}
/>

Based on NightFury's answer

Mike
  • 75
  • 6
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 03 '22 at 02:10
0

I had the same problem like you, I could fix it by passing prop loadEarlier={true} to GiftedChat component then pass your function to onLoadEarlier to fetchMoreData just like you did and this should fix it hopefully.

Hope this help.

A.A.
  • 81
  • 2