Auto scrollToIndex FlatList doesn't work in long lists

247 Views Asked by At

I have an implementation for autoscrolling through FlatList by index. When the index is greater than 40-45 the autoscrolling doesn't work. On 1-39 indexes - autoscroll works good. Btw: when I tried to make scroll on press the same behavior, only indexes up to 39 work.

My part of the code:

const [dataUpdated, setDataUpdated] = useState(false);
const [itemIn, setItemIn] = useState(-1);

useEffect(() => {
    if (selectedItem.id.length > 0) {
      setItemIn(items.map(object => object.itemId).indexOf(selectedItem.id));
    } else {
      setItemIn(0);
    }
  }, [items, selectedItem.id]);

 const listRef = useRef<FlatList>(null);

useEffect(() => {
    let screenListener = true;
    setTimeout(() => {
      if (itemIn >= 0 && screenListener) {
        setDataUpdated(!dataUpdated);
        listRef?.current?.scrollToIndex({
          animated: true,
          index: itemIn,
        });
      }
    }, 500);
    return () => {
      screenListener = false;
    };
  }, [dataUpdated, itemIn]);

 <ItemsList
          data={items}
          onItemPressed={onItemPressed}
          selectedItem={selectedItem}
          setSelectedItem={setSelectedItem}
          refIt={listRef}
          onScrollToIndexFailed={() => {}}
          extraData={dataUpdated}
        />
1

There are 1 best solutions below

0
On

I found the way to do it - FlashList from Shopify perfectly handles such scoll