react-virtualized InfiniteLoader in both directions, top and bottom - infinite-scroll

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.

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.