react-virtualized InfiniteLoader in both directions, top and bottom

Question

How to make infinite scrolling in both directions, up and down. I am using the InfiniteLoader and the List, both are react-virtualized components. I have a list of timestamps with initial date-time range. From there the list should be infinite in both directions. Currently, scroll-down to the bottom of the List will trigger the function _loadMoreRows(). However, I would like to trigger the _loadMoreRows() with the same functionality when scrolling in the direction up.

Lammers

Answer 1

I have it working now :) Everything is fine. The threshold prop of the <InfiniteLoader> defines the threshold number of indices before the start/end of the List when to prefetch data, i.e. trigger _loadMoreRows().

The first and the last item in this.state.items should have their corresponding loadedRowsMap set to undefined after the initial data fetch.

    const items = _getItems(); // fetch items
    const rowCount = items.length;
    const loadedRowsMap = [];
    _.map(this.state.loadedRowsMap,(row,index)=>{
      const status = (index===0 || index===rowCount-1) ? undefined : STATUS_LOADED;
      loadedRowsMap.push(status)});
    scrollToIndex = parseInt(rowCount/2,10);
    this.setState({
      items, rowCount, loadedRowsMap, scrollToIndex,
    });

Before displaying the list, a scrollToIndex prop of the <List> component should be set to the middle of the list, i.e. rowCount/2. This number should satisfy the equation

    0 + threshold < scrollToIndex < rowCount - 1 - threshold.

Function _isRowLoaded() will check loadedRowsMap[index]. If it is set to STATUS_LOADED or STATUS_LOADING (internal constants used inside the InfiniteLoader) it will not trigger _loadMoreRows(). If it is set to undefined, then it will trigger _loadMoreRows().

With this setup, trigering _loadMoreRows() works in both scroll directions, up and down.

Lammers

I did the same but cannot get the list to stay at its current scroll position after an add of elements at the top. can you share a piece of code of how you did it? – Workbench

Hello! Was wondering if there's a way to have a working code demo to use as an example? It's exactly what I need, but unsure how to absorb this information as it is. – Ricebird