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

Technical Q&A
1

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

2

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
1 Like