reactjs - Infinite Scrolling in react - react native

Question

I want to make an scrolling system to my chat app. But i am stucked. i can not solve the issue how to handle the useEffect and query pagination. Can anyone help me?

UseEffect for loading chat first time:

useEffect(() => {
    const unsubscribe = chatsRef
      .orderBy("createdAt", "desc")
      .limit(10)
      .onSnapshot((querySnapshot) => {
        const messagesFirestore = querySnapshot
          .docChanges()
          .filter(({ type }) => type === "added")
          .map(({ doc }) => {
            const message = doc.data();
            return { ...message, createdAt: message.createdAt.toDate() };
          });
        //console.log(messagesFirestore);
        appendMessages(messagesFirestore);
        if (messagesFirestore.length != 0)
          goBack(ChatRoomID, messagesFirestore[0]["text"]); // This part get the data from child to parent for showing last received message to chat card.
      });
    return () => unsubscribe();
  }, []);

Appending them to react-native-gifted-chat:

  const appendMessages = useCallback(
    (messages) => {
      setMessages((previousMessages) =>
        GiftedChat.append(previousMessages, messages)
      );
    },
    [messages]
  ); 

And here is the gifted Chat component:

  return (
    <GiftedChat
      messages={messages}
      user={user}
      onSend={handleSend}
      loadEarlier={true}
      infiniteScroll={true}
      onLoadEarlier={() => console.log("aa")} // I stucked with it. What kind of function should i coded for that.
    />
  );

question from:https://stackoverflow.com/questions/65875129/infinite-scrolling-in-react-react-native

Answer 1

Waitting for answers