renderItem Called Multiple Times with Incorrect Index

[PLKHawaR]

I'm using an image viewer component, and I'm experiencing unexpected behavior with the renderItem function. When the currentIndex is set to 1, renderItem is being called multiple times with the following indexes: (0, 1, 1, 2). This is unexpected and seems excessive. It happens even though the visible currentIndex has updated to 4.

I'm using direct HTTP image URLs that are immediately downloadable and displayed using ImageView. However, despite the straightforward image loading, renderItem is still triggered multiple times with inconsistent or repeated indices.

Expected Behavior:
When the currentIndex is 4, I expect renderItem to be called only for items around that index (like 3, 4, 5) — not earlier indices like 0 or 1 multiple times.

Actual Behavior:

renderItem is being triggered with indices that are far from the current index.

Some indices (like 1) are rendered more than once.

This causes unnecessary re-renders and potential performance issues, especially when loading images over the network.

Image source: Direct HTTP URLs

Steps to Reproduce:

Set up an image carousel with network images.

Scroll to an index (e.g., 4).

Observe renderItem calls and the indexes passed in.

[vincemavill]

same issue here +1

[vincemavill]

@PLKHawaR i think i found the sollution

make sure you add this in your ImageView

imageIndex={img_viewer_index}
onImageIndexChange={(index) => setImgViewerIndex(index)}