GetStream / react-native-bidirectional-infinite-scroll

📜 React Native - Bidirectional Infinite Smooth Scroll
https://getstream.github.io/react-native-bidirectional-infinite-scroll/
MIT License
236 stars 27 forks source link

onEndReached Not called every time #41

Open ghost opened 1 year ago

ghost commented 1 year ago

I want load more data from firebase as my previous project I Used same method and same code it's working perfectly;but right now it was not working onEndReached called only one time after scroll bottom to top it's not called.

How To Load more data in flatlist?

I have attached my source code here.

let me know what should I do?

Thank You

        <FlatList
        enableAutoscrollToTop={false}
        showsVerticalScrollIndicator={false}
        ref={ref => (this.flatList = ref)}
        onContentChange={this.scrollToEnd}
        data={this.state.messages}
        inverted
        style={{marginBottom: hp(2.5)}}
        onEndReached={() => this.loadMoreOlderMessages()}
        renderItem={({item, index}) => {
          var isMyMessage =
            this.props.user.userDetails.id == item.user._id ? true : false;
          return (
            <Message
              item={item}
              key={index}
              OnlIds={this.state.dates.map(item => item?.id)}
              isLeft={isMyMessage ? false : true}
              message={item?.text}
              onSwipe={(text, isLeft) => {
                this.props.user?.userDetails?.isCommunityChatBlock
                  ? null
                  : this.swipeToReply(text, isLeft, item, this.flatList);
                setTimeout(() => {
                  this.inputRef?.focus();
                }, 0);
              }}
            />
          );
        }}
        keyExtractor={item => item.id}
        HeaderLoadingIndicator={() => null}
        onStartReachedThreshold={10} // optional
        onEndReachedThreshold={0.1}
        initialNumToRender={15}
      />

loadMoreOlderMessages = async () => {
await ChatController.loadMoremessagesData({
  path: `${COLLECTIONS.COMMUNITYMESSAGES}`,
})
  .then(response => {
    if ('data' in response) {
      if (response.data.length > 0) {
        response.data.map(item => {
          this.callBack({data: {data: item, type: 'added'}}, false);
        });
      } else {
      }
    } else {
    }
  })
  .catch(error => {
    return;
  });

};

krmao commented 8 months ago

onEndReachedThreshold=100

Gand4lf commented 4 months ago

I'm getting the same issue. Have you found any solution?