reactjs - Flat List infinite scrolling

Question

so I am trying to get my app to load more data when I scroll to the bottom. Initially, 8 documents are getting fetched and stored in state. I am using firebase.

Here is the code:

import React, {useCallback, useEffect, useState} from 'react';
import {ActivityIndicator, Dimensions, Text, View} from 'react-native';
import firestore from '@react-native-firebase/firestore';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import FolloweringScreens from './FolloweringScreens';
import {TouchableOpacity} from 'react-native-gesture-handler';

const {width, height} = Dimensions.get('screen');

function Following({route, navigation}) {
  const [followingData, setfollowingData] = useState();
  const [loading, setLoading] = useState(true);
  const [lastVisible, setLastVisible] = useState(0);

  // Following counts, displayname, image
  const fetchData = useCallback(() => {
    const dataRef = firestore().collection('usernames');

    dataRef
      .doc(route.params.username.toLowerCase())
      .collection('Following')
      .orderBy('followedAt')
      .startAfter(lastVisible)
      .limit(7)
      .onSnapshot((snapshot) => {
        setLastVisible(lastVisible + snapshot.docs.length - 1);
        let promises = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          promises.push(
            data.path.get().then((res) => {
              const userData = res.data();
              return {
                profileName: doc.id ? doc.id : null,
                displayName: userData.displayName ? userData.displayName : null,
                followerCount:
                  userData.followers !== undefined ? userData.followers : 0,
                followingCount:
                  userData.following !== undefined ? userData.following : 0,
                imageUrl: userData.imageUrl ? userData.imageUrl : null,
              };
            }),
          );
        });
        Promise.all(promises).then((res) => setfollowingData(res));
        setLoading(false);
      });
  }, []);

  useEffect(() => {
    const dataRef = firestore().collection('usernames');

    const cleanup = dataRef
      .doc(route.params.username.toLowerCase())
      .collection('Following')
      .onSnapshot(fetchData);

    return cleanup;
  }, [route.params.username, fetchData]);

  return (
    <>
      <View
        style={styles}>
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <Icon name="menu" color="#222" size={30} />
        </TouchableOpacity>
        <Text style={{left: width * 0.05}}>Following</Text>
      </View>

      {loading ? (
        <ActivityIndicator size="large" color="black" />
      ) : (
        <>
          <FolloweringScreens
            data={followingData}
            screen={'Following'}
            username={route.params.username}
            navigation={navigation}
            fetchData={fetchData}
          />
        </>
      )}
    </>
  );
}

export default Following;

This fetched data gets put in to my Flat List here and I use it When scrolled to the bottom, I call fetchData again, but this time the lastVisible should change and the next 8 documents should be loaded and displayed, but this does not happen

<>
      <FlatList
        scrollEnabled={true}
        onEndReachedThreshold={0}
        onEndReached={fetchData}
        data={data}
        keyExtractor={(i, index) => index.toString()}
        renderItem={({item, index}) => {
          return (
            <>
               Data used here 
            </>
          );
        }}
      />
    </>

question from:https://stackoverflow.com/questions/65906517/flat-list-infinite-scrolling

Answer 1

Waitting for answers