How to make a flat list scroll Infinitely in React Native With a Finite Amount of data in Array

Question

I have flat list horizontally set with data of 11 items coming from an array, which is fixed and never changes

what I want is when user reaches at the end of flat list while scrolling, the data should remain the same but the first item should show up in the last and then so on

here is what I have tried so far

  <FlatList
        {...this.props}
        ref={ref => {
          this.infListRef = ref;
        }}
        data={this.props.data}
        onScrollEndDrag={this.handleScroll}
        initialScrollIndex={0}
        scrollEventThrottle={16}
        renderItem={this.props.renderItem}
        onScroll={({nativeEvent}) => this.checkScroll(nativeEvent)}
        horizontal
        showsHorizontalScrollIndicator={false}
        keyExtractor={item => item.id}
      />

Any help will be highly appreciated.

Answer 1

Basically, implementing onScroll usage is when you want to be noticed when the actually scroll related to the scroll position (aminations for instance). When you would like to be notified when the user reaches, or about to reach, to the end of the FlatList.

You should implement onEndReached and onEndReachedThreshold to handle a better user experience when the user reaches the threshold.

The new data you're getting from the source (server or no matter wherefrom) should be concatenated to existing this.props.data

See good blog post - https://scotch.io/tutorials/implementing-an-infinite-scroll-list-in-react-native

And this SO answers - React Native Infinite Scroll

My solution refers to pagination because infinite scroll is a private case of pagination, it's the exact same approach.