Bidirectional infinite scrolling with FlatList?

Question

Has anyone had experience doing bidirectional infinite scrolling with FlatList (or any other component)?

My use case is I have a calendar month view that I want to be able to swipe left and right to get the next and previous month.

FlatList with onEndReached and onEndReachedThreshold works great for one direction, but there is no similar thing for the start. Any suggestions?

Answer 1

You can use the onScroll props on the Flatlist for that: https://reactnative.dev/docs/scrollview#onscroll

        onScroll={({
                nativeEvent: {
                    contentInset: { bottom, left, right, top },
                    contentOffset: { x, y },
                    contentSize: { height: contentHeight, width: contentWidth },
                    layoutMeasurement: { height, width },
                    zoomScale,
                },
            }) => {
                if ( y <= your_start_threshold) {
                     // Do what you need to do on start reached
                }
            }}

Only problem is that React native doesn't support bidirectional FlatList on Android. This means that when you add items to the start of your list, it will jump to the top instead of keeping the current items in view (https://github.com/facebook/react-native/issues/25239).

(iOs does have a maintainVisibleContentPosition props)