Issue with ViewableItem index and renderItem index

[Paolo-Gambardella]

Current behavior

Im building a tiktok feed like. All my items are fullscreen and i want to autoplay my video when my items are viewable. I have a first version with a FlatList that work perfectly but with Flashlist it doesn't. Why ? It seems that flashlist is rendering 2 items in the same time and my component can't know if he can play the video because the index is never the same as the viewableItem index

Expected behavior

To be able to run my video whenever an item is viewable

To Reproduce

const [currentIndex, setCurrentIndex] = useState(0)

const viewabilityConfig = useRef({
  itemVisiblePercentThreshold: 75,
  waitForInteraction: false,
  minimumViewTime: 50,
})

const onViewableItemsChanged = useCallback((info: ViewableItemsChangedType) => {
  const visibleIndex = info.viewableItems[0]?.isViewable ? info.viewableItems[0]?.index || 0 : 0
  setCurrentIndex(visibleIndex)
}, [])

const renderItem = useCallback(
    ({ item, index }) => {
      console.log('shouldPlay', currentIndex === index)
      return (
        <RenderItemComponent shouldPlay={currentIndex === index} />
      )
    },
    [currentIndex],
  )

<FlashList
  viewabilityConfig={viewabilityConfig.current}
  data={data}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  snapToInterval={FEED_HEIGHT}
  snapToAlignment="center"
  decelerationRate={"fast"}
  onViewableItemsChanged={onViewableItemsChanged}
  pagingEnabled={true}
  showsVerticalScrollIndicator={false}
  initialScrollIndex={0}
  estimatedItemSize={FEED_HEIGHT}
  estimatedListSize={{ height: FEED_HEIGHT, width: FEED_WIDTH }}
  showsVerticalScrollIndicator={false}
/>

Platform:

• iOS
• Android

Environment

1.4.1

[RRaideRR]

Hey @Paolo-Gambardella - have you found a solution there? I'm having exactly the same problem.

[RRaideRR]

Try to put it within the extraData prop of the list.

<Flashlist
  extraData={{currentIndex}}
   ...

[hirbod]

Source code and some
context on my TikTok FlashList Reel (done right and fast): https://twitter.com/nightstomp/status/1594737012317507584?s=46&t=SWbttNKOa-2noILNybeswQ

[fortmarek]

this doesn't seem like a bug @Paolo-Gambardella, hopefully, @hirbod's answer can help you out here 🙏