Get FlatList to trigger onEndReached earlier

Question

I’m using FlatList to build a TikTok-style video player, i.e. one list item covers the entire screen.

I’m fetching metadata about 10 videos at a time from a REST API (via useSWRInfinite), then populating my FlatList and using expo-av’s Video component and Mux.com for playback.

Right now onEndReached is triggered when I get to video 10, and then the next 10 videos are loaded, etc. How can I change this so onEndReached is triggered already on video 9?

Code

// Fine-tuning video feed experience:
const VIDEO_FEED_ITEMS_TO_FETCH_API = 10
const VIDEO_FEED_ITEMS_TO_RENDER = VIDEO_FEED_ITEMS_TO_FETCH_API - 2

const VIDEO_FEED_FLATLIST_OPTIONS = {
  removeClippedSubviews: true, // views that are outside of the viewport are detached from the native view hierarchy
  windowSize: 3, // measurement unit where 1 is equivalent to your viewport height
  initialNumToRender: VIDEO_FEED_ITEMS_TO_RENDER, // number of items that would cover the screen for every device
  maxToRenderPerBatch: VIDEO_FEED_ITEMS_TO_RENDER, // the next chunk of items rendered on every scroll
  updateCellsBatchingPeriod: 100, // the time interval (ms) between each batch of items rendered
  onEndReachedThreshold: 0.001 // limit where next API fetch is triggered (% of viewport height)
}

<FlatList
  ref={flatList}
  data={videos}
  renderItem={renderItem}
  initialScrollIndex={videoToScrollToIndex}
  getItemLayout={getItemLayout}
  onScrollToIndexFailed={handleScrollFailed}
  showsVerticalScrollIndicator={false}
  snapToInterval={viewAreaHeight}
  snapToAlignment='start'
  decelerationRate='fast'
  viewabilityConfig={VIEWABILITY_CONFIG}
  onViewableItemsChanged={handleViewableItemsChanged}
  onEndReached={handleEndReached}
  {...VIDEO_FEED_FLATLIST_OPTIONS}
/>

Yakupguly Malikov · Answer 1 · 2023-01-10T15:40:11.643

0

You can use onEndReachedThreshold which you also used in your VIDEO_FEED_FLATLIST_OPTIONS object. For more information you can visit docs

Updated

const VIDEO_FEED_FLATLIST_OPTIONS = {
  removeClippedSubviews: true, // views that are outside of the viewport are detached from the native view hierarchy
  windowSize: 3, // measurement unit where 1 is equivalent to your viewport height
  initialNumToRender: VIDEO_FEED_ITEMS_TO_RENDER, // number of items that would cover the screen for every device
  maxToRenderPerBatch: VIDEO_FEED_ITEMS_TO_RENDER, // the next chunk of items rendered on every scroll
  updateCellsBatchingPeriod: 100, // the time interval (ms) between each batch of items rendered
  onEndReachedThreshold: 1.5 // limit where next API fetch is triggered (% of viewport height)
}

edited Jan 10 '23 at 15:40

answered Jan 10 '23 at 14:18

Yakupguly Malikov

584
1
1
12

Thank Yakup, what do you think is a suitable value here, so it’s triggered already on video 9? As you can see I’m using `0.001`. – Tom Söderlund Jan 10 '23 at 14:53
It might depend on your design but try to use `0.5` or `0.6` – Yakupguly Malikov Jan 10 '23 at 15:03
Design is: 1 list item = full screen height (TikTok style) – Tom Söderlund Jan 10 '23 at 15:25
Updated your code and I tried sample project. If you want you can try it from [this link](https://codesandbox.io/embed/distracted-carson-ce1ckt?fontsize=14&hidenavigation=1&theme=dark). Let me know if it helped! – Yakupguly Malikov Jan 10 '23 at 15:41
Oh thanks Yakub! Can you tell me how you arrived at `onEndReachedThreshold={1.5}`? – Tom Söderlund Jan 11 '23 at 10:12
Since you said that your design is in full screen height then 1 stands for the last item and while you are in the middle of the item that is before the last one it triggers `onEndReached`. So it makes `1.5`. Also, if it helps please tick answer for help others. – Yakupguly Malikov Jan 11 '23 at 11:06

Get FlatList to trigger onEndReached earlier

Code

1 Answers1