Visible item does not play when switching videos (multiple video players rendered, active index not updating correctly)

[YspCoder]

Hi, thanks for the great library — overall it works very well for building a TikTok-style vertical video feed.
However, I’ve encountered an issue related to viewability updates and controlling video playback.

Problem Summary

When rendering a list of video players (e.g., 10 items), only the first item plays correctly.
After scrolling to the next item, the newly visible video does not automatically start playing even though onViewableItemsChanged fires.

It seems that the active index is not updating in time for the newly rendered item, so the paused prop does not receive the correct value.

What I'm Doing

I use onViewableItemsChanged to track the currently visible item:

const onViewableItemsChanged = ({ viewableItems }) => {
  const visibleItem = viewableItems.find(item => item.isViewable)
  if (visibleItem?.index !== undefined) {
    setVideoIndex(visibleItem.index)
  }
}

Inside renderItem, each video player's paused state depends on whether it is the active one:

const isActive = videoIndex === index

<Player paused={!isActive} />

Expected Behavior

• When I scroll from item 0 → item 1, onViewableItemsChanged should update the active index.
• The newly visible item should receive paused = false and begin playing immediately.
• The previous item should pause.

Actual Behavior

• Only the first video plays.
• After scrolling, the next video renders but stays paused.
• The visible index does update (confirmed by console logs), but the item does not re-render with the new paused value.

Environment

• React Native
• legend-list latest version
• iOS & Android
• Using vertical paging (pagingEnabled)

Possible Cause

It seems renderItem is not re-rendering when viewableItemsChanged fires, or the internal virtualization window prevents items from receiving updated props.

Request

Could you confirm whether LegendList supports re-rendering items based on an external state like videoIndex?
Or do we need to use a specific prop such as extraData, or enable a mode that ensures items update when the active index changes?
Any guidance or best practices for implementing a TikTok-style vertical video feed would be greatly appreciated.

Thank you!