Blank screen in flashlist when scrolling large data and also moving upwards when select an item

[us2310]

When I use Flashlist then scrolling through a large list using FlashList on the web, it momentarily shows a blank screen.

<FlashList
   data={data}
   renderItem={getRenderItemView}
   keyExtractor={getKeyExtractor}
   estimatedItemSize={65}
   contentInsetAdjustmentBehavior="automatic"
   ListFooterComponent={renderFooter()}
/>

[Entesta]

Try implementing progressive loading instead of loading all data at once, load data in chunks as the user scrolls.

import React, { useState, useCallback } from 'react';
   import { FlashList } from '@shopify/flash-list';

   const ProgressiveLoadingList = () => {
     const [data, setData] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [page, setPage] = useState(1);

     const loadMoreData = useCallback(async () => {
       if (isLoading) return;
       setIsLoading(true);
       try {
         // Replace this with your actual API call
         const newData = await fetchData(page);
         setData(prevData => [...prevData, ...newData]);
         setPage(prevPage => prevPage + 1);
       } catch (error) {
         console.error('Error loading more data:', error);
       } finally {
         setIsLoading(false);
       }
     }, [isLoading, page]);

     const renderItem = ({ item }) => (
       // Your render item logic here
     );

     const renderFooter = () => {
       if (!isLoading) return null;
       return <ActivityIndicator size="large" />;
     };

     return (
       <FlashList
         data={data}
         renderItem={renderItem}
         keyExtractor={(item) => item.id.toString()}
         estimatedItemSize={100}
         onEndReached={loadMoreData}
         onEndReachedThreshold={0.5}
         ListFooterComponent={renderFooter}
       />
     );
   };

   export default ProgressiveLoadingList;